js で div ちらつき原理と実装コードを実装する_javascript スキル

私は最近 easyui の使い方を勉強していますが、このフレームワークは本当に便利で使いやすいことが分かりました。このフレームワークを作成できる人はきっとマスターのレベルに達しているはずです。

今日このアプリケーションに出会ったときは、ソースコードを見てすぐに理解できましたが、それまではまだとても魔法のように感じました。実際、もっと頭を使えと自分に言い聞かせました。確かに考えたことはありましたが、ソースコードを取り出して見てみると、この時点での自分の表現がはっきりとわかりました。量的な変化が質的な変化を引き起こすとしたら、私のスキルははるかに遅れています。

まず、フリッカーの原理を分析しましょう。表示が頻繁に切り替わるのは 1 つだけです。

コードから始めましょう:

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も勉強スケジュールに入り、日に日にスケジュールが充実してきています...さあ、バカ鳥フェイフェイフェイフェイ...