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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
Angular2数据绑定详解
Apr 18 Javascript
基于vue2实现左滑删除功能
Nov 28 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
javascript 特殊字符串
2009/02/25 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
信息滚动效果的实例讲解
2017/09/18 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
Vue 获取数组键名的方法
2018/06/21 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Python getopt模块处理命令行选项实例
2014/05/13 Python
NumPy 数组使用大全
2019/04/25 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python实现不规则图形填充的思路
2020/02/02 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
scrapy头部修改的方法详解
2020/12/06 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
社区服务活动总结
2014/05/07 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python