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 嵌套的函数(作用域链)
Mar 15 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
JavaScript实现星级评价效果
May 17 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js中document.write的那点事
2014/12/12 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python 常用模块 re 使用方法详解
2019/06/06 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
工厂厂长的职责
2013/12/12 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
员工保密承诺书
2014/05/28 职场文书
车辆转让协议书
2014/09/24 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
汉语拼音教学反思
2016/02/22 职场文书