快捷導(dǎo)航

js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼

更新時(shí)間：2014年06月24日 09:00:49 投稿：whsnow

閃爍的原理是什么呢：其實(shí)就一個(gè)，display在none與block之間頻繁的交替，這樣說(shuō)你明白了么，示例代碼如下，希望對(duì)大家有所幫助

最近在學(xué)著用easyui，發(fā)現(xiàn)框架用起來(lái)果然是方便簡(jiǎn)潔，能弄出這框架的都是大神級(jí)別了吧，牛啊....

今天碰到這個(gè)應(yīng)用可以說(shuō)是讓我非常之無(wú)語(yǔ)，整出源碼來(lái)一看就明白了，可之前卻還是感覺(jué)非常神奇，我也常常告訴自己，要多動(dòng)腦筋，實(shí)際上有一些也的確有想過(guò)，但實(shí)在是效果很牽強(qiáng)，而當(dāng)源碼拿出來(lái)看的時(shí)候卻又格外的明白，如果這時(shí)候我可以看到自己的表情，大抵就是一個(gè)糾結(jié)吧，如果說(shuō)量變引起質(zhì)變，那我的量還差的太多了，連見(jiàn)多識(shí)廣都算不上，何談創(chuàng)造啊。

先來(lái)分析下實(shí)現(xiàn)的原理吧，閃爍的原理是什么呢：其實(shí)就一個(gè)，display在none與block之間頻繁的交替，這樣說(shuō)你明白了么。

還是先上代碼：

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";//還是有收獲的，這個(gè)寫(xiě)法比if..else想必簡(jiǎn)單了好多 
i>8&&clearInterval(timer);//這個(gè)短路用的經(jīng)典啊 
},80); 
}; 
};

雖然原理上簡(jiǎn)單，但是前輩的代碼比我個(gè)人編寫(xiě)的代碼要簡(jiǎn)單太多了，還是很有收獲的。

easyui也進(jìn)入學(xué)習(xí)日程了，這一天天的是越排越滿啊......加油,笨鳥(niǎo)飛飛飛.....

您可能感興趣的文章:

閃爍

相關(guān)文章

javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
ES6頂層對(duì)象、global對(duì)象實(shí)例分析
這篇文章主要介紹了ES6頂層對(duì)象、global對(duì)象,結(jié)合實(shí)例形式分析了ES6頂層對(duì)象與global對(duì)象的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-06-06
Node.js開(kāi)發(fā)指南中的簡(jiǎn)單實(shí)例(mysql版)
工作原因需要用到nodejs，于是找到了《node.js開(kāi)發(fā)指南》這本書(shū)來(lái)看看，作者BYVoid 為清華大學(xué)計(jì)算機(jī)系的高材生，年紀(jì)竟比我還小一兩歲，中華地廣物博真是人才輩出,佩服
2013-09-09
將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的代碼
這篇文章主要介紹了將中國(guó)標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的方法,需要的朋友可以參考下
2014-03-03
純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇純js實(shí)現(xiàn)html轉(zhuǎn)pdf的簡(jiǎn)單實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
微信小程序uploadFile接口實(shí)現(xiàn)文件上傳
這篇文章主要介紹了微信小程序uploadFile接口實(shí)現(xiàn)文件上傳流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
動(dòng)態(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)更新highcharts數(shù)據(jù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
js獲得網(wǎng)頁(yè)背景色和字體色的方法
這篇文章主要介紹了js獲得網(wǎng)頁(yè)背景色和字體色的方法,需要的朋友可以參考下
2014-03-03
JS+canvas繪制的動(dòng)態(tài)機(jī)械表動(dòng)畫(huà)效果
這篇文章主要介紹了JS+canvas繪制的動(dòng)態(tài)機(jī)械表動(dòng)畫(huà)效果,涉及javascript結(jié)合HTML5 canvas簡(jiǎn)單數(shù)值計(jì)算與動(dòng)態(tài)繪圖相關(guān)操作技巧,需要的朋友可以參考下
2017-09-09
js格式化時(shí)間的方法
這篇文章主要介紹了js格式化時(shí)間的方法，對(duì)javascript時(shí)間格式化的方法進(jìn)行了總結(jié)，感興趣的小伙伴們可以參考一下
2015-12-12