首页 > 其他 > 详细

延时提示框与提示框关闭定时弹出

时间:2014-03-29 16:22:59      阅读:562      评论:0      收藏:0      [点我收藏+]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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;width:35px;
  background:#000; display:block; cursor:pointer; color:#fff;
}
#box div{
 position:absolute; top:35px; left:0px; width: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做的延时提示框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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{
  width:300px; height:200px; border:1px solid #ccc; margin:20px;
  position:relative; background:#666;
}
#box span{
  display:block; border:1px solid #ccc; width: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定时弹出提示框  

延时提示框与提示框关闭定时弹出,布布扣,bubuko.com

延时提示框与提示框关闭定时弹出

原文:http://www.cnblogs.com/xiaoxiaosha/p/3632470.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!