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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
Node.js编码规范
Jul 14 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
跟我学习javascript的循环
Nov 18 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
php 求质素(素数) 的实现代码
2011/04/12 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
vue-router传参用法详解
2019/01/19 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
python多进程操作实例
2014/11/21 Python
Python 正则表达式(转义问题)
2014/12/15 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
护校行动方案
2014/05/31 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
财务工作个人总结
2015/02/27 职场文书
奖学金主要事迹范文
2015/11/04 职场文书