JS latency prompt box implementation method explanation _ javascript skills

This article mainly introduces the implementation method of JS delayed prompt box, and analyzes in detail the principle and specific implementation steps of JavaScript to implement the delayed prompt function in the form of examples, which has some reference value, for more information about how to implement the JS latency prompt box, see the example in this article. We will share this with you for your reference. The details are as follows:

Prompt Box function: when the mouse points to the avatar, an information box is displayed. you can move the mouse to the information box. when the mouse leaves the Avatar, the information box disappears. when the mouse leaves the information box, the information box disappears.

Functional implementation ideas:

1. obtain the element.
2. when the mouse points to Div1, Div2 is displayed.
3. when the mouse leaves Div1, the delay of Div2 is reduced by 0.5 seconds, so that the mouse can be moved to Div2 for time.
4. when you point to Div2, Div2 is displayed. Because setTimeout is set in step 2 to make Div2 disappear, you can use clearTimeout () to clear setTimeout to display Div2.
5. when the mouse leaves Div2, the delay of Div2 is reduced by 0.5 seconds, so that the mouse can point to Div1 at a time.
6. if you have set the cursor to Div1 in step 2, Div2 is displayed. However, because setTimeout is set in step 2, Div2 disappears, add clearTimeout () in step 2 () after the setTimeout is cleared, Div2 is displayed.

JS code:

《script》window.onload=function(){  var oDiv1=document.getElementById('p1');  var oDiv2=document.getElementById('p2');  time=null;  oDiv1.onmouseover=function()  {    clearTimeout(time);    oDiv2.style.display='block';    };  oDiv1.onmouseout=function()  {    time=setTimeout(function(){      oDiv2.style.display='none';    },500);  };  oDiv2.onmouseover=function()  {    clearTimeout(time);  };  oDiv2.onmouseout=function()  {    time=setTimeout(function(){      oDiv2.style.display='none';    },500);  };};《script》

Since the code looks similar, it can be simplified as follows:

《script》window.onload=function(){  var oDiv1=document.getElementById('p1');  var oDiv2=document.getElementById('p2');  time=null;  oDiv2.onmouseover=oDiv1.onmouseover=function()  {    clearTimeout(time);    oDiv2.style.display='block';    };  oDiv2.onmouseout=oDiv1.onmouseout=function()  {    time=setTimeout(function(){      oDiv2.style.display='none';    },500);  };};《script》

HTML and CSS code:

I hope this article will help you design JavaScript programs.