JavaScript定时器基础

最新推荐文章于 2021-12-20 22:38:13 发布

可芭乐

最新推荐文章于 2021-12-20 22:38:13 发布

阅读量320

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54632444

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

开启定时器

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

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器基础

定时器的作用、数码时钟、延迟提示框开启定时器function show(){ alert('a') } setInterval(show,1000);setInterval是一种间隔型的定时器。1000指的是1000毫秒，也就是每隔一秒show函数就会执行一次（每隔一秒就会弹出a） setTimeout是一种延迟型的定时器。可以将setInterval改成set
复制链接

扫一扫