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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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
德生PL990的分析评价
2021/03/02 无线电
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
图片之间的切换
2006/06/26 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
python单元测试unittest实例详解
2015/05/11 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python可视化实现代码
2019/01/15 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
HTML基础详解(下)
2021/10/16 HTML / CSS
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫