javascript實現的div塊閃爍效果程式碼例項

螞蟻小編發表於2017-03-26
JavaScript

本章節介紹一下如何實現div元素的閃爍效果，下面是實現此功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:50px;
  height:50px;
  background-color:cyan;
  display:block;
}
</style>
<script type="text/javascript">
window.onload=function(){ 
  var obj=document.getElementById("antzone"); 
  var timer=null; 
  obj.onclick=function(){ 
    var i=0; 
    clearInterval(timer); 
    timer=setInterval(function(){ 
      obj.style.display=i++%2?"none":"block";
      i>8&&clearInterval(timer);
    },80); 
  }; 
};
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，點選div可以實現元素的閃爍效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，文件的內容完全載入完畢之後再去執行函式中的程式碼。

2.var obj=document.getElementById("antzone")，獲取id屬性值為antzone的元素物件。

3.var timer=null，宣告一個變數並賦值為null，用作定時器函式的標識。

4.obj.onclick=function(){}，為元素物件註冊點選事件處理函式。

5.var i=0，宣告一個變數並賦值為0。

6.clearInterval(timer)，停止定時器函式的執行，這個很重要，否則連續的點選會建立多個定時器函式，出現閃爍越來越快的混亂效果。

7.timer=setInterval(function(){   

  obj.style.display=i++%2?"none":"block";

  i>8&&clearInterval(timer);

},80); 

每隔80毫秒執行一次函式，如果i和2的餘數為0，那麼就設定為顯示，如果為1就設定為隱藏，並i會加1，如果i大於8，那麼就聽哈子定時器函式的執行。

二.相關閱讀:

1.setInterval()函式可以參閱setInterval()函式用法詳解一章節。

2.clearInterval()函式可以參閱window.clearInterval()方法一章節。

相關文章