• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div einmal aufblinken lassen

D

domitz

Neues Mitglied
Hallo, ich möchte ein Div einmal kurz aufblinken lassen, wenn man die Seite betritt.

Wie kann man das am besten realisieren?
 
Hier eien Seite als Beispiel

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript">
            function Blinker(options) {
                
                var timer;
                var blinkElement = options.element;
                var blinkDuration  = (options.duration) ? options.duration*1000 : 1000;
                var blinkColor = (options.color) ? options.color : "red";
                
                var memoryColor;
                
                
                
                this.startBlink = function() {
                    memoryColor = blinkElement.style.backgroundColor;
                    blinkElement.style.backgroundColor = blinkColor;
                    timer = window.setInterval(I.resetBlink, blinkDuration);
                };
                
                
                this.resetBlink = function() {
                    window.clearInterval(timer);
                    blinkElement.style.backgroundColor = memoryColor;
                };
                
                var I = this;
                this.startBlink();
            }
            window.onload = function() {
                new Blinker({
                    "duration" : "0.5",
                    "element" : document.getElementById("bla"),
                    "color" : "green"
              })
            };
        </script>
        <style>
            #bla {
                width: 400px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        
        <div id="bla">huhu</div>
    </body>
</html>
 
Oh. habs gerade mal ausprobiert. Dachte setTimeout würde sich wie sleep in anderen Sprachen verhalten, sodass keine anderen Befehle mehr ausgeführt werden. Aber dem ist nicht so. Somit ist Timeout an dieser Stelle echt besser.
 
Hey, also mit dem Code gehts

Code: 
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 9000);
var i = 0, farbe = 1;
function Farbe () {
  if (farbe == 1) {
    document.bgColor = "#ff0000";
    farbe = 2;
  } else {
    document.bgColor = "#ff0080";
    farbe = 1;
  }
  i = i + 1;
  if (i >= 10)
    window.clearInterval(aktiv);
}
</script>

Jedoch wird dabei der komplette Hintergrund der Seite im Farbwechsel gemacht, ich würde gerne nur ein DIV damit bestücken.

LG Dominik
 
Um nur ein einzelnes Div aufblinken zu lassen anstatt das ganze Dokument musst du natürlich auch dieses Div auswählen...
Code: 
var div = document.getElementById( "letMeBlink" );
// oder
var div = document.getElementsByTagName( "div" )[ 0 ];
// oder etwas browserspezifisch
var div = document.getElementsByClassName( "blink" )[ 0 ];
 
Code: 
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 9000);
var i = 0, farbe = 1;
function Farbe () {
  if (farbe == 1) {
    document.bgColor = "#ff0000";
    farbe = 2;
  } else {
    document.bgColor = "#ff0080";
    farbe = 1;
  }
  i = i + 1;
  if (i >= 10)
    var div = document.getElementsByClassName( "blink" )[ 0 ];
    window.clearInterval(aktiv);
}
</script>
so?

Und das div dann mit class="blink" bestücken?
 
nein. anstatt document.bgColor
So könnte es aussehen:
Code: 
<script type="text/javascript">
var aktiv = window.setInterval("Farbe()", 9000);
var i = 0, farbe = 1;
function Farbe () {
var div = document.getElementsByClassName( "blink" )[ 0 ];
  if (farbe == 1) {
    div.style.backgroundColor = "#ff0000";
    farbe = 2;
  } else {
    div.style.backgroundColor = "#ff0080";
    farbe = 1;
  }
  i = i + 1;
  if (i >= 10)
    window.clearInterval(aktiv);
}
</script>

Wobei ich den Code sehr unsauber finde.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben