使用 getTime(）使用 Javascript 初始化重复操作

Initializing a repetitive action with Javascript with getTime()

本文关键字：使用操作初始化 Javascript getTime 更新时间：2023-09-26

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

我想根据时间更改元素上的 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）设置新的日期（）（2）使用 getTime（）方法获取自 1970 年 1 月 1 日以来的时间（以毫秒为单位）（3）用模运算符将其分解为半秒（4）并根据值是否在0-499之间提供新的背景色和条件的除法余数

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

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

您需要

使用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/。

你真正想做的是使用计时器。让计时器每 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 初始化重复操作

Initializing a repetitive action with Javascript with getTime()

使用 getTime(）使用 Javascript 初始化重复操作