0

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

我想根据时间更改元素的 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 值，对吗？

4

2 回答 2

1

您需要在将来的某个时间使用setTimeout()或触发一个动作。setInterval()有关文档，请参见此处和此处。

循环和检查时间在 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/。

于 2012-05-28T17:33:21.403 回答
0

您在这里真正想做的是使用计时器。让计时器每 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>
于 2012-05-28T17:38:21.027 回答