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 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Python sep参数使用方法详解
2020/02/12 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
自我评价正确写法范文
2013/12/10 职场文书
环保志愿者活动方案
2014/08/14 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
大学学生会辞职信
2015/05/13 职场文书