首頁 >web前端 >js教程 >js實作div閃爍原理及實作程式碼_javascript技巧

js實作div閃爍原理及實作程式碼_javascript技巧

WBOY
WBOY原創
2016-05-16 16:43:23981瀏覽

最近在學著用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&#63;"none":"block";//还是有收获的,这个写法比if..else想必简单了好多 
i>8&&clearInterval(timer);//这个短路用的经典啊 
},80); 
}; 
};

雖然原理上簡單,但是前輩的程式碼比我個人寫的程式碼簡單太多了,還是很有收穫的。

easyui也進入學習行程了,這一天天的是越排越滿啊......加油,笨鳥飛飛飛.....

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn