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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
短信提示使用 特效
Jan 19 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
php header函数的常用http头设置
2015/06/25 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
如何离线执行php任务
2017/02/21 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Python类的基础入门知识
2008/11/24 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python关于变量名的基础知识点
2020/03/03 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
奥巴马演讲稿
2014/01/08 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
团代会闭幕词
2015/01/28 职场文书
公司开除员工通知
2015/04/22 职场文书
老公出轨后的保证书
2015/05/08 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python