js implements div flickering principle and implementation code_javascript skills

I am learning to use easyui recently, and I found that the framework is really convenient and simple to use. Anyone who can create this framework must be at the level of a master, it is awesome....

I was speechless when I came across this application today. I understood it immediately after looking at the source code, but before that it still felt very magical. I often told myself to use my brain more. In fact, there are some I have indeed thought about it, but the effect is really far-fetched. When I took out the source code and looked at it, I understood it very clearly. If I could see my own expression at this time, it would probably be a tangle. If quantitative changes lead to qualitative changes, Then my skills are far behind. I can’t even be considered well-informed, let alone creative.

Let’s first analyze the implementation principle. What is the principle of flickering? In fact, there is only one. The display frequently alternates between none and block. Do you understand?

Let’s start with the code:

html part:

<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); 
}; 
};

Although it is simple in principle, the code of my predecessors is much simpler than the code I wrote personally, and it is still very rewarding.

EasyUI has also entered the study schedule, and the schedule is getting fuller and fuller every day... Come on, stupid bird Feifei Feifei...