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).三元运算符可以参阅三元运算符一章节。

回复

我来回复
  • 暂无回复内容