Zeitgesteuerte animierte GIF-Anzeige

Question

Noob Alarm .....

Ich habe in früheren Fragen gesucht und kann diese spezielle Anfrage nicht finden.

Für mein Kunstprojekt habe ich ein animiertes Gif erstellt und möchte, dass es mein animiertes Gif für nur eine Stunde pro Tag auf der Website zeigt, die ich für meine anderen Projekte erstellt habe.

Ich habe dieses Skript, das sehr ähnlich ist, aber ich muss die Anzeige automatisieren (für eine Stunde pro Tag) und nicht auf klicken oder getreten. Ich kann diese Phasen loswerden, bin mir aber nicht sicher, wofür ich sie ersetzen soll.

JavaScript-Animation

<script type="text/javascript"> 
    <!-- 
     var imgObj = null; 
     var animate ; 

     function init(){ 
      imgObj = document.getElementById('myImage'); 
      imgObj.style.position= 'relative'; 
      imgObj.style.left = '0px'; 
     } 

     function moveRight(){ 
      imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; 
      animate = setTimeout(moveRight,20); // call moveRight in 20msec 
     } 

     function stop(){ 
      clearTimeout(animate); 
      imgObj.style.left = '0px'; 
     } 

     window.onload =init; 
    //--> 
    </script> 

Vielen Dank im Voraus .....

Answer 1

Ok, ist erste, was zu bemerken, dass Sie muss ab und zu die aktuelle Uhrzeit checken Wenn wir zu dieser bestimmten Stunde sind, möchten Sie die Animation zeigen.

Nehmen wir als Beispiel: zwischen 13h und 14h (1pm und 2pm) - von jetzt an werde ich die 24h Notation verwenden.

Wir können eine interval verwenden, um zu überprüfen, ob es bereits 13h ist. Wir wählen die Präzision selbst aus. Aus Gründen der diesem Beispiel lassen Sie uns sagen, dass wir alle 5 Minuten überprüfen:

//Note: we could say "300000" immediately instead, but with the calculation, we can easily change it when we want to. 
var gifInterval = setInterval(function() {canWeAnimateYet();}, 5 * 60 * 1000); 

Also, wir ein Intervall bekam, die alle 5 Minuten überprüfen. Jetzt brauchen wir ein flag (oder bool) zu sehen, ob die Animation ausgeführt werden soll oder nicht ...

var animateThatGif = false; 

Und jetzt .. Wir müssen die Funktion, um die Zeit zu überprüfen:

var canWeAnimateYet = function() { 
    //Checks here. 
} 

auf, dass Funktion müssen wir die aktuelle Zeit überprüfen. Wenn es nach 13, aber vor 14 Uhr ist, müssen wir unsere Flagge auf true setzen, sonst bleibt es false.

var canWeAnimateYet = function() { 

    //Get current time 
    //Note: "new Date()" will always return current time and date. 
    var time = new Date(); 

    //Note: getHours() returns the hour of the day (between 0 and 23 included). Always in 24h-notation. 
    if (time.getHours() >= 13 && time.getHours < 14) 
     animateThatGif = true; 
    else 
     animateThatGif = false; 
}