js实现div闪烁原理及实现代码
更新时间：2014年06月24日 09:00:49 投稿：whsnow
闪烁的原理是什么呢：其实就一个，display在none与block之间频繁的交替，这样说你明白了么，示例代码如下，希望对大家有所帮助
最近在学着用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实现智能手环时间显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了ES6顶层对象、global对象,结合实例形式分析了ES6顶层对象与global对象的概念、原理、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
工作原因需要用到nodejs，于是找到了《node.js开发指南》这本书来看看，作者BYVoid 为清华大学计算机系的高材生，年纪竟比我还小一两岁，中华地广物博真是人才辈出,佩服2013-09-09
这篇文章主要介绍了将中国标准时间转换成标准格式的方法,需要的朋友可以参考下2014-03-03
下面小编就为大家带来一篇纯js实现html转pdf的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了微信小程序uploadFile接口实现文件上传流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
下面小编就为大家带来一篇动态更新highcharts数据的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了js获得网页背景色和字体色的方法,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了JS+canvas绘制的动态机械表动画效果,涉及javascript结合HTML5 canvas简单数值计算与动态绘图相关操作技巧,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了js格式化时间的方法，对javascript时间格式化的方法进行了总结，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论