js实现div闪烁原理及实现代码


Posted in Javascript onJune 24, 2014

最近在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊....

今天碰到这个应用可以说是让我非常之无语,整出源码来一看就明白了,可之前却还是感觉非常神奇,我也常常告诉自己,要多动脑筋,实际上有一些也的确有想过,但实在是效果很牵强,而当源码拿出来看的时候却又格外的明白,如果这时候我可以看到自己的表情,大抵就是一个纠结吧,如果说量变引起质变,那我的量还差的太多了,连见多识广都算不上,何谈创造啊。

先来分析下实现的原理吧,闪烁的原理是什么呢:其实就一个,display在none与block之间频繁的交替,这样说你明白了么。

还是先上代码:

html部分:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;" id="showZone"></div>//是不是很熟悉啊 
javascript部分: 
window.onload=function(){ 
var obj=document.getElementById("showZone"); 
var timer=null; 
obj.onclick=function(){ 
var i=0; 
clearInterval(timer); 
timer=setInterval(function(){ 
obj.style.display=i++%2?"none":"block";//还是有收获的,这个写法比if..else想必简单了好多 
i>8&&clearInterval(timer);//这个短路用的经典啊 
},80); 
}; 
};

虽然原理上简单,但是前辈的代码比我个人编写的代码要简单太多了,还是很有收获的。

easyui也进入学习日程了,这一天天的是越排越满啊......加油,笨鸟飞飞飞.....

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
Aug 22 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 #Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 #Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 #Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 #Javascript
a标签click和href执行顺序探讨
Jun 23 #Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 #Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 #Javascript
You might like
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
浅谈php://filter的妙用
2019/03/05 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
应届生护士求职信
2013/11/01 职场文书
西式婚礼证婚词
2014/01/12 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
校企合作协议书
2014/04/16 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
基于python实现银行管理系统
2021/04/20 Python
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
nginx之queue的具体使用
2022/06/28 Servers