定时器——setTimeout

来源：互联网发布：淘宝首页制作图编辑：程序博客网时间：2024/06/05 23:04

html部分

<body>    <div id="qq"></div>    <div id="title"></div></body>

css部分

<style>    #qq { width:200px; height:400px; background:#F9C; }    #title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }</style>

js部分

<script>        window.onload = function(){            var qq = document.getElementById("qq");            var title = document.getElementById("title");            var timer = null;            qq.onmouseover = function(){                setTimeout(function(){                    title.style.display = "block";                },200)            }            qq.onmouseout = function(){                timer = setTimeout(function(){                    title.style.display = "none";                },200)            }            title.onmouseover = function(){                clearInterval(timer);                title.style.display = "block";            }            title.onmouseout = function(){                title.style.display = "none";            }        }    </script>

效果图

这里写图片描述

阅读全文

0 0