js点击div实现闪烁效果代码实例

2023-12-04 13:40:57 前端笔记 53

此代码实例并没有多大的实际应用效果，但是可以从中获取一些相关知识或者启发。

本章节就对此代码实例做一下详细注解，代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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就停止定时器函数的执行，也就实现了闪动效果。