js笔记（9）之定时器数字时钟延时提示框
生活随笔
收集整理的這篇文章主要介紹了
js笔记（9）之定时器数字时钟延时提示框
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
定時器
function show(){alert('a');
}
setInterval(show,1000); 函數(shù)，毫秒（間隔型、無限次執(zhí)行）
setTimeout(show,1000); (延時型、只執(zhí)行一次)clearInterval
clearTimeout------------------------------------------------------------
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>定時器的開啟和關(guān)閉</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="關(guān)閉" />
</body>
</html>
----------------------------------------------------------------------
獲取當(dāng)前時間var oDate = new Date();
alert(getHours());
getMinutes();
getSeconds();<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>數(shù)碼時鐘</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();//當(dāng)前星期幾
---------------------------------------------------------------------------------
延時提示框<!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>延時提示框之函數(shù)合并</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>
總結(jié)
以上是生活随笔為你收集整理的js笔记（9）之定时器数字时钟延时提示框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工行高级经理林承军：工行基于 MySQL
- 下一篇： js笔记（10）之无缝滚动