JavaScript定时器基础

时间：2022-06-05 00:10:18

定时器的作用、数码时钟、延迟提示框

  • 开启定时器
function show(){
        alert('a')
    }
    setInterval(show,1000);

setInterval是一种间隔型的定时器。1000指的是1000毫秒，也就是每隔一秒show函数就会执行一次（每隔一秒就会弹出a）
setTimeout是一种延迟型的定时器。可以将setInterval改成setTimeout，则意思为show函数延迟一秒钟执行，只会执行一次。
开启关闭小实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>

setInterval对应clearInterval
setTimeout对应clearTimeout
为防止网页中有多个定时器，关闭定时器时可能会混淆，所以要给定时器命名

  • 数码时钟
    var oDate = new Date();
    alert(oDate.getMinutes());

先给出一个定义
getMinutes()获取当前系统的分钟；
getHours()获取当前系统的时钟；
getSeconds()获取当前系统的秒钟；
getFullYear()获取当前系统的年份；
getMonth() + 1获取当前月份
getDate()获取当前系统的日期
getDay()获取当前系统的星期

简易时钟模拟：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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) +'.png';
 }
 }
 setInterval(tick,1000);
 tick();
 }
</script>
</head>
<body style="background: white; color: red; font-size: 50px; ">
<img src="img/0.png" />
<img src="img/0.png" />
    :
<img src="img/0.png" />
<img src="img/0.png" />
    :
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>

toDou( n )函数为的是保证每一个时钟、分钟、秒都是显示两位数，利用str字符串连接，
tick()函数是显示当前系统的时间
在最后加入一个tick()函数是为了使刷新时不会出现00:00:00的延迟情况，能使JavaScript函数直接运行
str[i]只能在高版本的浏览器下兼容，在IE7及以下的版本不兼容，所以要使用charAt(i)为完全兼容
演示结果为：
JavaScript定时器基础

  • 延迟提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
float: left;
margin: 10px;
}
#div1 {
width: 50px;
height: 50px;
background: red;
}
#div2 {
width: 250px;
height: 180px;
background: #999;
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>

合并后：

<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>

JavaScript合并后简化
标签：

相关文章