JS延时器提示框的应用实例代码解析_

1、JS延时器提示框的应用实例代码解析_ 这篇文章主要介绍了JS延时器提示框的应用实例代码解析 的相关资料,需要的伴侣可以参考下 挺直给大家贴代码了，具体代码如下所示： !DOCTYPE html html lang=en head meta charset=UTF-8 title延时显示提示框/title style #div1 float: left; width: 60px; height: 60px; background-color: aqua; #div2 position: relative; float: left; margin: 0 10px; width: 200px; he

2、ight: 200px; background-color: #cccccc; display: none; /style script window.onload = function () var oDiv1 = document.getElementById(div1); var oDiv2 = document.getElementById(div2); var timer = null; / oDiv1.onmouseover = function () / clearTimeout(timer); / oDiv2.style.display = block; /鼠标移入div1时显

3、示div2 / ; / / oDiv1.onmouseout = function () / timer = setTimeout(function () / oDiv2.style.display = none; /鼠标移除div1时隐蔽div2 / , 500); /为了从div1移入div2,所以移出div1时div2隐蔽应当有一个延时设置 / ; / / oDiv2.onmouseover = function () / clearTimeout(timer); /清除延时器设置,当鼠标移入div2时,div2应当显示 / ; / / oDiv2.onmouseout = functi

4、on () / timer = setTimeout(function () / oDiv2.style.display = none; /当鼠标移出div2时,div2应当隐蔽 / , 500); /当鼠标移出div2并移入div1时,div2会闪耀一下再显示,设置一个延时,清除闪耀的效果; / / 但是设置延时器之后,鼠标移入div1时,div2却隐蔽了,缘由是setTimeout, / / 应当清除延时器,在oDiv1.onmouseover大事中添加,清除延时器的代码 / ; / 由于这四个大事中代码两两对应地相同或相像,可以做如下简化处理: oDiv1.onmouseover = o

5、Div2.onmouseover = function () clearTimeout(timer); oDiv2.style.display = block; /* 鼠标移入div1时显示div2,虽然oDiv2.onmouseover大事中没有写oDiv2.style.display = block; 但是事实上oDiv2是block状态,多写一句代码没有实质性影响*/ ; oDiv1.onmouseout = oDiv2.onmouseout = function () timer = setTimeout(function () oDiv2.style.display = none; /鼠标移除div1时隐蔽div2 , 500); /为了从div1移入div2,所以移出div1时div2隐蔽应当有一个延时设置 ; / 简化后的代码执行结果跟前面的代码效果完全全都. /script /head body h2延时提示框/h2 div id=div1/div div id=div2/div /body /html 延时提示框编写时需要留意的点都记录在说明当