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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
JavaScript中跨域问题的深入理解
Mar 04 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
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
JavaScript中双向数据绑定详解
2017/05/03 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
GC是什么?为什么要有GC?
2013/12/08 面试题
财务出纳员岗位职责
2013/11/26 职场文书
班班通项目实施方案
2014/02/25 职场文书
迎新生标语大全
2014/10/06 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
怎么用Python识别手势数字
2021/06/07 Python
python ansible自动化运维工具执行流程
2021/06/24 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python
教你部署vue项目到docker
2022/04/05 Vue.js
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技