JS——定时器

定时器在JS中的作用：

1）制作动画、时钟、倒计时

2）异步操作

3）函数缓冲与节流

定时器类型：

1）setTimeout 只执行一次的定时器

2）clearTimeout 关闭只执行一次的定时器

3）setInterval 反复执行的定时器

4）clearInterval 关闭反复执行的定时器

demo：

1）setTimeout(自制弹窗)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .pop_con{
            /*暂时隐藏*/
            display: none;
        }

        .pop{
            width: 300px;
            height:200px;
            background-color: #fff;
            border:1px solid #000;

            /*使框居中*/
            position: fixed;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top: -100px;
            /*让弹窗覆盖在mask上面*/
            z-index:9999;

        }

        .mask{
            position: fixed;
            width:100%;
            height: 100%;
            background-color: #000;
            left:0;
            top:0;
            /*设置透明度*/
            opacity:0.3;
            /*ie兼容的透明度*/
            filter:alpha(opacity=0.3);
            /*让弹窗覆盖在mask上面*/
            z-index:9990;
        }
    </style>
    
    <script type="text/javascript">
        window.onload = function () {

            var oPop = document.getElementById('pop');
            <!--设置定时器-->
            setTimeout(showpop,2000);
            function showpop() {
               oPop.style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <!--自制弹框-->
    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

2）setInterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .box{
            width:100px;
            height:100px;
            background-color: gold;
            position: fixed;
            left:20px;
            top:20px;
        }

    </style>
    <script type="text/javascript">

        window.onload = function () {
            var oBox = document.getElementById('box');
            var left = 20;
            var timer = setInterval(function () {
                left+=2;
                oBox.style.left = left + 'px';
                //按照一定条件关闭定时器
                if(left>700){
                    clearInterval(timer);
                }
            },30)
        }

    </script>
</head>
<body>
    <div class="box" id="box"></div>
</body>
</html>

3）定时器制作时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器制作时钟</title>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            function timego() {
                //实例化一个对象Date
                var now = new Date();
                var year = now.getFullYear();
                //这里要注意，这里得到的月份是0~11月，所以要+1
                var month = now.getMonth()+1;
                var date = now.getDate();
                //星期：星期天是一个礼拜的第一天，week=0
                var week = now.getDay();
                var hour = now.getHours();
                var minute = now.getMinutes();
                var second = now.getSeconds();
                //标签里面的内容：innerHTML
                oDiv.innerHTML = '当前时间：'+year+'年'+month+'月'+date+'日'+
                    ' '+toweek(week)+" "+tudou(hour) +':'+ tudou(minute)+":"+ tudou(second);
            }
            //一秒钟刷新一次，但是这样的话，页面的第一秒中是没有内容的，所以加一个timego（）
            timego();
            setInterval(timego,1000);
        }
        //将数字返回成汉字
        function toweek(num){

            switch(num){
                case 0:
                    return '星期天';
                case 1:
                    return '星期一';
                case 2:
                    return '星期二';
                case 3:
                    return '星期三';
                case 4:
                    return '星期四';
                case 5:
                    return '星期五';
                case 6:
                    return '星期六';
            }
        }
        function tudou(num) {

            if(num<10){
                return '0'+ num;
            }
            else{
                return num;
            }
        }
    </script>
</head>
<body>
    <div class="div1" id="div1"></div>
</body>
</html>

4）定时器制作倒计时

猜你喜欢