JS基础：延时提示框

o0o0o0o0o0oo

于 2020-06-08 18:56:43 发布

阅读量109

点赞数

本文链接：https://blog.youkuaiyun.com/o0o0o0o0o0oo/article/details/106626495

版权

javascript 专栏收录该内容

25 篇文章

订阅专栏

开启定时器

setInterval 间隔型
setTimeout 延时型

停止定时器

clearInterval
clearTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<script>
window.onload=function()
{
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var timer = null;

    oDiv1.onmouseover=function()
    {
        clearTimeout(timer);//避免当从div2移向div1时，div2消失
        oDiv2.style.display = 'block';
    };

    oDiv2.onmouseout=oDiv1.onmouseout=function()
    {
        timer=setTimeout(function(){
            oDiv2.style.display='none';
        },500);
    };

    oDiv2.onmouseover=function()
    {
        clearTimeout(timer);
    };  
};
</script>
<style>
    #div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    #div2{
        width: 400px;
        height: 300px;
        background-color: slategray;
        display: none;
    }
    div{
        float: left;
        margin: 10px;
    }
</style>
</head>
<body>
    <div>
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>