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的执行速度
Jan 23 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
JS实现留言板功能
Jun 17 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
小程序实现多列选择器
Feb 15 Javascript
JS实现扫雷项目总结
May 19 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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调用数据库的存贮过程
2006/10/09 PHP
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
PHP笔试题
2012/02/22 面试题
大学毕业后的十年规划
2014/01/07 职场文书
学生会竞聘书范文
2014/03/31 职场文书
出国留学担保书
2014/05/20 职场文书
会员活动策划方案
2014/08/19 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python