Question

我是开发新手，所以这可能是一个愚蠢的问题，但我想我还是会问。毕竟，我看起来很糟糕只会让你看起来更好。：）

我想根据时间更改元素上的css样式。我尝试了几种不同的方法，可以在html里面显示时间，但是我不能用时间来触发其他事件。我把这个小页面放在一起，让事情变得更简单。

 <html>
 <head>
 <title>timerTest</title>
 <style type="text/css">

 #box {
    height:200px;
    width: 200px;
    background-color: red;
 }

 </style>
 </head>

 <body onload="maFucktion()">
   <div id="box">T</div>
   <script type="text/javascript">

     var box = document.getElementById('box');

     function maFucktion()
     {

       var d = new Date();

       for(i=0; i > 100; ++i)
       {
          if((d.getTime() % 1000) < 499)
        {
        box.style.backgroundColor = "blue";
        box.innerHTML = d.getTime() % 1000;
        }
      else
        {
        box.style.backgroundColor = "red";
        box.innerHTML = d.getTime() % 1000;
        }
      }
 }
 </script>
 </body>
 </html>

所以，我的小脑告诉我这应该做的是，在页面加载时，执行maFucktion（），它应该启动一个for循环：

（1）设置一个新的Date（）（2）使用getTime（）方法获取自1970年1月1日以来的时间（以毫秒为单位）（3）用模数算子将其分解为半秒（4）并根据值是否在0-499之间提供新的背景颜色和条件的除法余数

我希望它每半秒更换一次box.style.backgroundColor，这应该看起来像1998年的那些愚蠢的横幅广告之一，但我不能让它自动更改。

我知道for循环可能不是最好的，但它至少应该为#box显示一个新的innerHTML值，对吧？

Answer 1

您需要在将来的某个时间使用setTimeout()或setInterval()来触发操作。有关文档，请参阅here和here。

在javascript中循环和检查时间非常非常糟糕，因为它会阻止浏览器处理用户事件。

所以要每半秒更改一次背景颜色，你可以这样做：

var isBlue = false;
var box = document.getElementById('box');
setInterval(function() {
    box.style.backgroundColor = isBlue ? "red" : "blue";
    isBlue = !isBlue;
}, 500);

您可以在此处查看有效的演示：http://jsfiddle.net/jfriend00/n5Mhz/。

Answer 2

你真正想做的是使用计时器。让计时器每1/2秒调用一次该功能：

<script type="text/javascript">

var box = document.getElementById('box');
var clrs = "#ff0000,#0000ff".split(",")
var cPos = 0;    
function flipC() {    
   box.style.backgroundColor = clrs[cPos];
   cPos = 1-cPos;
   window.setTimeout(flipC,500)    
}
flipC()

</script>

使用带有getTime（）的Javascript初始化重复操作

2 个答案: