js點選div實現閃爍效果程式碼例項

antzone發表於2017-04-02
JS

此程式碼例項並沒有多大的實際應用效果，但是可以從中獲取一些相關知識或者啟發。

本章節就對此程式碼例項做一下詳細註解，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box{
  position:absolute;
  top:50%;
  left:50%;
  color:#fff;
  width:200px;
  height:200px;
  background:red;
  cursor:pointer;
  letter-spacing:5px;
  text-align:center;
  font:12px/200px Arial;
  margin:-100px 0 0 -100px;
}
</style>
<script type="text/javascript">
window.onload=function (){
  var oBox=document.getElementById("box");
  var timer=null;
  oBox.onclick=function(){
    var i=0;
    clearInterval(timer);
    timer=setInterval(function(){
      oBox.style.display=i++ % 2 ? "none":"block";
      i> 6 && (clearInterval(timer))
    }, 80)
  }
};
</script>
</head>
<body>
<div id="box">點選產生閃爍效果</div>
</body>
</html>

上面的程式碼，點選div可以實現閃爍效果，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var oBox=document.getElementById("box")，獲取id屬性值為box的元素物件。

（3）.var timer=null,用來儲存定時器函式的標識。

（4）.oBox.onclick=function(){}，為oBox元素註冊click事件處理函式。

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

（6）.clearInterval(timer)，停止定時器函式的執行，防止快速連續點選出現定時器函式重疊效果。

（7）.timer=setInterval(function(){

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

  i> 6 && (clearInterval(timer))

}, 80)當i的值為奇數時候就顯示，否則就隱藏，並且大於6就停止定時器函式的執行，也就實現了閃動效果。

二.相關閱讀:

（1）.setInterval()方法可以參閱setInterval()一章節。

（2）.求餘運算可以參閱javascript求餘運算一章節。

（3）.三元運算子可以參閱三元運算子一章節。

相關文章