版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wgf5845201314/article/details/90760542
一、setTimeout 应用
<!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> setTimeout 定时器</title>
<style>
#qq{
width: 200px;
height: 400px;
background: red;
float: left;
}
#title{
width: 200px;
height: 200px;
background: blue;
float: left;
display: none;
}
</style>
</head>
<body>
<div id='qq'>
</div>
<div id="title">
</div>
<script>
var qq = document.getElementById('qq');
var title = document.getElementById('title');
var time = null;
qq.onmouseover = show;
qq.onmouseout = hide;
function show(){
time=setTimeout(function(){ //只执行一次
title.style.display="block";
},2000);
}
function hide(){
title.style.display="none";
clearInterval(time);
}
</script>
</body>
</html>
鼠标悬浮红色区域2s后，右边蓝色区域出现
鼠标离开红色区域，蓝色区域消失