js点击div实现闪烁效果代码实例
分类：实例代码
此代码实例并没有多大的实际应用效果，但是可以从中获取一些相关知识或者启发。
本章节就对此代码实例做一下详细注解，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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）.三元运算符可以参阅三元运算符一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu