定时动画 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 小时表示法。

我们可以使用interval 来检查它是否已经过了 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;
}