延时显示提示框 《script》window.onload = function () {var oDiv1 = document.getElementById('p1');var oDiv2 = document.getElementById('p2');var timer = null;// oDiv1.onmouseover = function () {// clearTimeout(timer);// oDiv2.style.display = 'block'; //鼠标移入p1时显示p2// };//// oDiv1.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; //鼠标移除p1时隐藏p2// }, 500); //为了从p1移入p2,所以移出p1时p2隐藏应该有一个延时设置// };//// oDiv2.onmouseover = function () {// clearTimeout(timer); //清除延时器设置,当鼠标移入p2时,p2应当显示// };//// oDiv2.onmouseout = function () {// timer = setTimeout(function () {// oDiv2.style.display = 'none'; //当鼠标移出p2时,p2应当隐藏// }, 500); //当鼠标移出p2并移入p1时,p2会闪烁一下再显示,设置一个延时,清除闪烁的效果;// // 但是设置延时器之后,鼠标移入p1时,p2却隐藏了,原因是setTimeout,// // 应当清除延时器,在oDiv1.onmouseover事件中添加,清除延时器的代码// };// 由于这四个事件中代码两两对应地相同或相似,可以做如下简化处理:oDiv1.onmouseover = oDiv2.onmouseover = function () {clearTimeout(timer);oDiv2.style.display = 'block';/* 鼠标移入p1时显示p2,虽然oDiv2.onmouseover事件中没有写oDiv2.style.display = 'block';但是实际上oDiv2是'block'状态,多写一句代码没有实质性影响*/};oDiv1.onmouseout = oDiv2.onmouseout = function () {timer = setTimeout(function () {oDiv2.style.display = 'none'; //鼠标移除p1时隐藏p2}, 500); //为了从p1移入p2,所以移出p1时p2隐藏应该有一个延时设置};// 简化后的代码执行结果跟前面的代码效果完全一致.}《script》延时提示框
延时提示框编写时需要注意的点都记录在注释当中，逐个对照注意一下，这个功能看过视频教程之后实现起来比较顺畅，原因是在编写代码之前对所需功能做了一个列表按照列表一一实现，出现问题再进行相应的调整比上来直接写代码强多了。
