用getTime（）初始化一個重複的動作用Javascript（）

我是一個開發新手，所以這可能會成爲一個愚蠢的問題，但我想我會問無論如何。畢竟，我看起來不好只是讓你看起來更好。 :)用getTime（）初始化一個重複的動作用Javascript（）

我想改變基於時間元素的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（）方法（3）以模毫秒運算符（4）將其分解爲半秒，並且提供新的背景顏色和條件的餘數部分，從1970年1月1日開始以毫秒爲單位的時間根據值是否在0-499之間或者其他

我希望它改變b ox.style.backgroundColor每半秒鐘應該最終看起來像1998年的那些愚蠢的橫幅廣告之一，但我不能讓它自動改變。

我知道一個for循環可能不是最好的，但它應該至少顯示一個新的#box的innerHTML值，對吧？

來源

2012-05-28 Dom Ramirez

使用現代瀏覽器，像這樣在循環中更改顏色發生得如此之快以至於大多數人都無法看到它。 –

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

來源

2012-05-28 17:33:21 jfriend00

太棒了。超級簡單。 –

你真正想在這裏做的是使用計時器。讓計時器每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-28 17:38:21

爲什麼要使用：'var clrs =「＃ff0000，＃0000ff」.split（「，」）'而不是直接聲明數組：'var clrs = [「＃ff0000」，「＃0000ff」]; ？ – jfriend00

這只是我拉取CSV數據的長列表的習慣。減少拼寫錯誤。 –

用getTime（）初始化一個重複的動作用Javascript（）

回答

相關問題