js實現div閃爍-------Day46

來源:互聯網
上載者:User

標籤:javascript   div閃爍   

最近在學著用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也進入學習議程了,這一天天的是越排越滿啊......加油,笨鳥飛飛飛.....




聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.