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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
Vue自定义指令详解
Jul 28 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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学习笔记汇总
2014/10/05 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
js自带函数备忘 数组
2006/12/29 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
详解Vue组件之作用域插槽
2018/11/22 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python处理大日志文件
2019/07/23 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
机械设备与数控技术专业求职信
2014/08/10 职场文书
技术经济专业求职信
2014/09/03 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
golang中的空slice案例
2021/04/27 Golang
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers