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 相关文章推荐
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
js实现分页功能
May 24 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 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实现可逆加密的方法
2015/08/11 PHP
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python 常见的反爬虫策略
2020/09/27 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
高中家长寄语
2014/04/02 职场文书
学校读书活动总结
2014/06/30 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
辞职离别感言
2015/08/04 职场文书
售房协议书范本
2015/08/11 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
Redis实现订单过期删除的方法步骤
2022/06/05 Redis