JavaScript

来源：互联网发布：vue.js 手风琴菜单编辑：程序博客网时间：2024/06/06 00:20

开启定时器

setInterval 【间隔性】一旦启动就不会停下来
setTimeout【延时性】只执行一次

停止定时器

clearInterval
clearTimeout

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style media="screen">        #div1 {            width: 200px;            height: 30px;            background-color: red;        }        #div2 {            width: 150px;            height: 200px;            background-color: gray;            margin: 10px;            display: none;        }    </style></head><body>    <div id="div1"></div>    <div id="div2"></div>    <script type="text/javascript">        window.onload = function () {            var oDiv1 = document.getElementById('div1');            var oDiv2 = document.getElementById('div2');            var timer = null;            oDiv1.onmouseover = function () {                 oDiv2.style.display = 'block';   //步骤1、鼠标移入div1.显示div2                clearTimeout(timer);          //步骤6、            }            oDiv1.onmouseout = function () {                timer = setTimeout(function () { //步骤2、鼠标移除div1.延时 0.3s 消失div2                    oDiv2.style.display = 'none';                },300);            }            oDiv2.onmouseover = function () {                oDiv2.style.display = 'block';   //步骤3、鼠标移入div2.显示Div2                clearTimeout(timer);             //步骤4、清除步骤2.样式            }            oDiv2.onmouseout = function () {                    timer = setTimeout(function () { //步骤5、鼠标移除div2.延时 0.3s 消失div2                    oDiv2.style.display = 'none';                },300);            }        }    </script></body></html>

js部分最终简化代码为

    <script >        window.onload = function () {            var oDiv1 = document.getElementById('div1');            var oDiv2 = document.getElementById('div2');            var timer = null;            oDiv1.onmouseover = oDiv2.onmouseover = function () {                oDiv2.style.display = 'block';                clearTimeout(timer);            }            oDiv1.onmouseout = oDiv2.onmouseout = function () {                timer = setTimeout(function () {                    oDiv2.style.display = 'none';                },500);            }        }    </script>

阅读全文

0 0