<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>setTimeout延迟提示框</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
#box{
height:35px;margin:20px;
}
#box li{
position:relative; height:35px; line-height:35px; padding:0 10px;35px;
background:#000; display:block; cursor:pointer; color:#fff;
}
#box div{
position:absolute; top:35px; left:0px; 60px;
background:#000; padding-left:10px; display:none;
}
</style>
</head>
<body>
<ul id='box'>
<li>开始
<div>
<p>提示一</p>
<p>提示二</p>
<p>提示三</p>
</div>
</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var oBox = $('box');
var oLi = oBox.getElementsByTagName('li')[0];
var oDiv = oBox.getElementsByTagName('div')[0];
var timer = null;
oLi.onmousemove = Move;
oLi.onmouseout = Out;
function Move(){
clearTimeout(timer);
oDiv.style.display ='block';
};
function Out(){
timer = setTimeout(function(){
oDiv.style.display ='none';
},600);
};
}
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
用setTimeout做的延时提示框
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>setInterval与clearInterval</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
list-style:none;
}
#box{
300px; height:200px; border:1px solid #ccc; margin:20px;
position:relative; background:#666;
}
#box span{
display:block; border:1px solid #ccc; 35px; font-size:12px; cursor:pointer; color:#fff;
height:20px; line-height:20px; text-align:center; position:absolute; top:2px; right:2px;
}
</style>
</head>
<body>
<div id='box'>
<span>关闭</span>
</div>
<script type="text/javascript">
window.onload = function(){
var oBox = $('box');
var oClose = oBox.getElementsByTagName('span')[0];
var timer = null;
oClose.onclick = onClose;
function onClose(){
oBox.style.display = 'none';
clearInterval(timer);
timer=setInterval(function(){
oBox.style.display ='block';
},5000);
};
}
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
setInterval定时弹出提示框