js實(shí)現(xiàn)div閃爍原理及實(shí)現(xiàn)代碼
最近在學(xué)著用easyui,發(fā)現(xiàn)框架用起來(lái)果然是方便簡(jiǎn)潔,能弄出這框架的都是大神級(jí)別了吧,牛啊....
今天碰到這個(gè)應(yīng)用可以說(shuō)是讓我非常之無(wú)語(yǔ),整出源碼來(lái)一看就明白了,可之前卻還是感覺非常神奇,我也常常告訴自己,要多動(dòng)腦筋,實(shí)際上有一些也的確有想過(guò),但實(shí)在是效果很牽強(qiáng),而當(dāng)源碼拿出來(lái)看的時(shí)候卻又格外的明白,如果這時(shí)候我可以看到自己的表情,大抵就是一個(gè)糾結(jié)吧,如果說(shuō)量變引起質(zhì)變,那我的量還差的太多了,連見多識(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è)寫法比if..else想必簡(jiǎn)單了好多
i>8&&clearInterval(timer);//這個(gè)短路用的經(jīng)典啊
},80);
};
};
雖然原理上簡(jiǎn)單,但是前輩的代碼比我個(gè)人編寫的代碼要簡(jiǎn)單太多了,還是很有收獲的。
easyui也進(jìn)入學(xué)習(xí)日程了,這一天天的是越排越滿啊......加油,笨鳥飛飛飛.....
- JS CSS制作飽含熱情的鑲邊文字閃爍特效
- AngularJS頁(yè)面訪問(wèn)時(shí)出現(xiàn)頁(yè)面閃爍問(wèn)題的解決
- JavaScript與jQuery實(shí)現(xiàn)的閃爍輸入效果
- js實(shí)現(xiàn)文字閃爍特效的方法
- JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字閃爍效果的方法
- JS實(shí)現(xiàn)的網(wǎng)頁(yè)背景閃電閃爍效果代碼
- JS實(shí)現(xiàn)跟隨鼠標(biāo)閃爍轉(zhuǎn)動(dòng)色塊的方法
- js實(shí)現(xiàn)的標(biāo)題欄新消息閃爍提示效果
- 利用JS實(shí)現(xiàn)瀏覽器的title閃爍
- JavaScript 平滑文字閃爍
- 高亮閃爍某個(gè)元素的js腳本
- JS+CSS實(shí)現(xiàn)閃爍字體效果代碼
相關(guān)文章
javascript強(qiáng)制彈出新窗口實(shí)現(xiàn)代碼
javascript強(qiáng)制彈出新窗口,主要是利用的動(dòng)態(tài)創(chuàng)建鏈接。2009-12-12
原生JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
深入理解Javascript中的循環(huán)優(yōu)化
這篇文章介紹了Javascript中的循環(huán)優(yōu)化,有需要的朋友可以參考一下2013-11-11
微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用)
這篇文章主要介紹了微信小程序自定義彈窗實(shí)現(xiàn)詳解(可通用),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
左右懸浮可分組的網(wǎng)站QQ在線客服代碼(可謂經(jīng)典)
QQ在線客服在每一個(gè)web開發(fā)人員的記憶里都是一個(gè)經(jīng)典,既然是經(jīng)典,也就是必不可少,那就應(yīng)該很好的呈現(xiàn)出來(lái),本文整理了一些左右懸浮可分組的網(wǎng)站QQ在線客服代碼,需要的朋友可以了解下2012-12-12
JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)
在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實(shí)現(xiàn)提示框跟隨鼠標(biāo)移動(dòng)的相關(guān)實(shí)例代碼,需要的朋友們學(xué)習(xí)下。2019-08-08
javascript背景時(shí)鐘實(shí)現(xiàn)方法
這篇文章主要介紹了javascript背景時(shí)鐘實(shí)現(xiàn)方法,涉及javascript時(shí)間及頁(yè)面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06
JS實(shí)現(xiàn)點(diǎn)擊按鈕可實(shí)現(xiàn)編輯功能
本文通過(guò)一段實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)點(diǎn)擊按鈕可編輯效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的的朋友參考下吧2018-07-07
js中substring和substr的詳細(xì)介紹與用法
這篇文章介紹了js中substring和substr的用法,有需要的朋友可以參考一下2013-08-08

