js實現(xiàn)div閃爍原理及實現(xiàn)代碼
更新時間：2014年06月24日 09:00:49 投稿：whsnow
閃爍的原理是什么呢：其實就一個，display在none與block之間頻繁的交替，這樣說你明白了么，示例代碼如下，希望對大家有所幫助
最近在學著用easyui，發(fā)現(xiàn)框架用起來果然是方便簡潔，能弄出這框架的都是大神級別了吧，牛啊....
今天碰到這個應用可以說是讓我非常之無語，整出源碼來一看就明白了，可之前卻還是感覺非常神奇，我也常常告訴自己，要多動腦筋，實際上有一些也的確有想過，但實在是效果很牽強，而當源碼拿出來看的時候卻又格外的明白，如果這時候我可以看到自己的表情，大抵就是一個糾結吧，如果說量變引起質變，那我的量還差的太多了，連見多識廣都算不上，何談創(chuàng)造啊。
先來分析下實現(xiàn)的原理吧，閃爍的原理是什么呢：其實就一個，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實現(xiàn)智能手環(huán)時間顯示
這篇文章主要為大家詳細介紹了javascript實現(xiàn)智能手環(huán)時間顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了ES6頂層對象、global對象,結合實例形式分析了ES6頂層對象與global對象的概念、原理、用法及相關操作注意事項,需要的朋友可以參考下2019-06-06
工作原因需要用到nodejs，于是找到了《node.js開發(fā)指南》這本書來看看，作者BYVoid 為清華大學計算機系的高材生，年紀竟比我還小一兩歲，中華地廣物博真是人才輩出,佩服2013-09-09
這篇文章主要介紹了將中國標準時間轉換成標準格式的方法,需要的朋友可以參考下2014-03-03
下面小編就為大家?guī)硪黄僯s實現(xiàn)html轉pdf的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了微信小程序uploadFile接口實現(xiàn)文件上傳流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
動態(tài)更新highcharts數(shù)據的實現(xiàn)方法
下面小編就為大家?guī)硪黄獎討B(tài)更新highcharts數(shù)據的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了js獲得網頁背景色和字體色的方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了JS+canvas繪制的動態(tài)機械表動畫效果,涉及javascript結合HTML5 canvas簡單數(shù)值計算與動態(tài)繪圖相關操作技巧,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了js格式化時間的方法，對javascript時間格式化的方法進行了總結，感興趣的小伙伴們可以參考一下2015-12-12