使用getTime（）使用Javascript初始化重复操作_Javascript_Date_Onload Event_Gettime

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

javascript date

使用getTime（）使用Javascript初始化重复操作,javascript,date,onload-event,gettime,Javascript,Date,Onload Event,Gettime,我是一个开发新手，所以这可能是一个愚蠢的问题，但我想我还是会问的。毕竟，我看起来不好只会让你看起来更好。：）我想根据时间更改元素的css样式。我尝试了几种不同的方法，可以获得在html内部显示的时间，但我不能使用这些时间触发其他事件。我把这个小页面放在一起，使事情对我来说更简单 <html> <head> <title>timerTest</title> <style type="text/css"> #box {

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

我想根据时间更改元素的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>


计时试验
#盒子{
高度：200px；
宽度：200px；
背景色：红色；
}
T
var-box=document.getElementById（'box'）；
函数maFucktion（）
{
var d=新日期（）；
对于（i=0；i>100；++i）
{
if（（d.getTime（）%1000）<499）
{
box.style.backgroundColor=“蓝色”；
box.innerHTML=d.getTime（）%1000；
}
其他的
{
box.style.backgroundColor=“红色”；
box.innerHTML=d.getTime（）%1000；
}
}
}

所以，我的小脑袋告诉我这应该做的是，在页面加载时，执行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);

您可以在这里看到一个工作演示：。

您真正想做的是使用计时器。让计时器每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>


var-box=document.getElementById（'box'）；
var clrs=“#ff0000，#0000ff.”拆分（“，”）
var-cPos=0；
函数flipC（）{
box.style.backgroundColor=clrs[cPos]；
cPos=1-cPos；
window.setTimeout（flipC，500）
}
flipC（）

在现代浏览器中，像这样在循环中更改颜色的速度如此之快，以至于大多数人都看不到。为什么要使用：

var clrs=“#ff0000，#0000ff”。拆分（“，”）

而不是直接声明数组：

var clrs=[“#ff0000”，“#0000ff”]？这只是我拉长CSV数据列表的习惯。更少的打字错误。