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 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
js实现搜索栏效果
Nov 16 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php实现简单洗牌算法
2013/06/18 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP目录操作实例总结
2016/09/27 PHP
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
简单介绍react redux的中间件的使用
2018/04/06 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python中lambda与def用法对比实例分析
2015/04/30 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
简单实现python进度条脚本
2017/12/18 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python输出指定字符串的方法
2020/02/06 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
土木工程专业推荐信
2014/02/19 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
国庆节新闻稿
2015/07/17 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
基于Python编写一个监控CPU的应用系统
2022/06/25 Python