Js div flicker principle and implementation code
- 2020-03-30 03:26:35
- OfStack
Recently, I have been learning to use easyui, and I found that the frame is really convenient and simple to use. What can make this frame is the level of great god, right?
Met today. I'm very speechless, the application can be said to be the entire source code to understand while see, but still feel very magical, I often tell myself, want to think more, actually does have some thought, but the effect is very weak, and when check it source but particularly understand that if I can see my own expression, generally is a struggle, if quantitative change causes the qualitative change, that my quantity is too much, even not informed, any talk about creation.
First, let's analyze the implementation principle. What is the flicker principle? Actually, there is only one display, which alternates between none and block frequently.
Or first on the code:
HTML part:
<div style="width: 50px;height: 50px;background-color: cyan;display: block;" id="showZone"></div>//Isn't that familiar
javascript Parts:
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";//Still have harvest, this is better than if.. Else must be much simpler
i>8&&clearInterval(timer);//This is a classic short circuit
},80);
};
};
Although simple in principle, the older code was much simpler than the code I wrote myself, which was rewarding.
Easyui has also entered into the learning schedule, which is getting more and more full day by day... Come on, stupid bird.