js笔记（9）之定时器数字时钟延时提示框
生活随笔
收集整理的这篇文章主要介绍了
js笔记（9）之定时器数字时钟延时提示框
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
定时器
function show(){alert('a');
}
setInterval(show,1000); 函数，毫秒（间隔型、无限次执行）
setTimeout(show,1000); (延时型、只执行一次)clearInterval
clearTimeout------------------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>定时器的开启和关闭</title>
<script type="text/javascript">window.onload = function(){var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var timer = null;oBtn1.onclick = function(){timer = setInterval(function(){alert('a');},1000);}oBtn2.onclick = function(){clearInterval(timer);}}
</script>
</head>
<body>
<input id="btn1" type="button" value="开启" />
<input id="btn2" type="button" value="关闭" />
</body>
</html>
----------------------------------------------------------------------
获取当前时间var oDate = new Date();
alert(getHours());
getMinutes();
getSeconds();<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>数码时钟</title>
<style type="text/css"></style>
<script type="text/javascript">function toDou(n){if(n < 10)return '0' + n;else return '' + n;}window.onload = function(){var aImg = document.getElementsByTagName('img');function tick(){var oDate = new Date();var str = toDou(oDate.getHours()) + toDou(oDate.getMinutes()) +toDou(oDate.getSeconds());for(var i = 0;i < aImg.length;i++){aImg[i].src = 'img/'+str.charAt(i)+'.jpg';}}setInterval(tick,1000);tick();}
</script>
</head>
<body style="background: #262626; color: white; font-size: 50px" >
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
:
<img src="img/0.jpg">
<img src="img/0.jpg">
</body>
</html>
-------------------------------------------------------------------------------获取年月日var oDate = new Date();
oDate.getFullYear();//年
oDate.getMonth()+1;//月
oDate.getDate();//哪一天
oDate.getDay();//当前星期几
---------------------------------------------------------------------------------
延时提示框<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>延时提示框</title>
<style type="text/css">div{float: left;margin: 10px;}#div1{width: 50px;height: 50px;background: red;}#div2{width: 250px;height: 180px;background: #CCC;display: none;}
</style>
<script type="text/javascript">window.onload = function(){var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var timer = null;oDiv1.onmouseover = function(){clearTimeout(timer);oDiv2.style.display = 'block';}oDiv1.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}oDiv2.onmouseover = function(){clearTimeout(timer);}oDiv2.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
---------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>延时提示框之函数合并</title>
<style type="text/css">div{float: left;margin: 10px;}#div1{width: 50px;height: 50px;background: red;}#div2{width: 250px;height: 180px;background: #CCC;display: none;}
</style>
<script type="text/javascript">window.onload = function(){var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var timer = null;oDiv2.onmouseover = oDiv1.onmouseover = function(){clearTimeout(timer);oDiv2.style.display = 'block';}oDiv2.onmouseout = oDiv1.onmouseout = function(){timer = setTimeout(function(){oDiv2.style.display = 'none';},500);}}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
总结
以上是生活随笔为你收集整理的js笔记（9）之定时器数字时钟延时提示框的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 工行高级经理林承军：工行基于 MySQL
- 下一篇： js笔记（10）之无缝滚动