JavaScript定时器基础

来源：互联网发布：金科天启大数据编辑：程序博客网时间：2024/06/08 04:09

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

开启定时器

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)为完全兼容
演示结果为：
这里写图片描述

延迟提示框

<!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合并后简化

0 0