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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
js前端图片加载异常兜底方案
Jun 21 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/11/19 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python实现的文件夹清理程序分享
2014/11/22 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
python数据类型强制转换实例详解
2020/06/22 Python
python设置表格边框的具体方法
2020/07/17 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
大学生个人求职信
2014/06/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
争做文明公民倡议书
2014/08/29 职场文书
销售工作决心书
2015/02/04 职场文书
2015年检验科工作总结
2015/04/27 职场文书
道歉的话怎么说
2015/05/12 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技