javascript - 定时动画 gif 显示

Question

新手警报......

我搜索了之前的问题，但找不到这个具体请求。

对于我的艺术项目，我创建了一个 gif 动画，并希望它在我为其他项目创建的网站上每天仅一小时显示/运行我的 gif 动画。

我有一个非常相似的脚本，但我需要自动显示(每天一小时)，而不是单击或步进。我可以摆脱这些阶段，但不确定用什么来代替它们。

JavaScript 动画

  <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>

提前谢谢您......

Answer 1

好的，首先要注意的是，您必须时不时地检查当前时间，以检查我们是否在您想要显示动画的特定时间。

举个例子:13 点到 14 点(下午 1 点到 2 点)之间 - 从现在开始我将使用 24 小时表示法。

我们可以使用间隔来检查是否已经过了 13 小时。我们自己选择精度。为了举例说明，假设我们每 5 分钟检查一次:

//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);

因此，我们得到了每 5 分钟检查一次的时间间隔。现在我们需要一个flag(或bool)来查看动画是否应该运行...

var animateThatGif = false;

现在..我们需要检查时间的函数:

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

在该函数上，我们需要检查当前时间。如果已经过了 13 点但在 14 点之前，我们需要将标志设置为 true，否则它保持 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;
}