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 Tools tooltip使用说明
Jul 14 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
jquery操作select大全
Apr 25 Javascript
使用javascript获取页面名称
Dec 23 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
JS module的导出和导入的实现代码
Feb 25 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python二叉树的实现实例
2013/11/21 Python
python 全局变量的import机制介绍
2017/09/07 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python实现ip代理池功能示例
2019/07/05 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
生日邀请函范文
2014/01/13 职场文书
产品促销活动策划书
2014/01/15 职场文书
英文求职信写作小建议
2014/02/16 职场文书
火箭队口号
2014/06/18 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
工程部岗位职责
2015/02/10 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
解决 redis 无法远程连接
2022/05/15 Redis
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python
python 镜像环境搭建总结
2022/09/23 Python