JS定时器相关用法

一、定时器在javascript中的作用

1、制作动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用定时器制作动画</title>
 6     <style>
 7         .box{
 8             width:100px;
 9             height:100px;
10             background: #ffb8f9;
11             position: fixed;
12             left:20px;
13             top:20px;
14         }
15     </style>
16     <script>
17         window.onload = function(){
18             var left=20;
19             var oBox = document.getElementById('box');
20             var timer = setInterval(function(){
21                 if(left>700){
22                     clearInterval(timer);
23                 }
24                 left++;
25                 oBox.style.left = left+'px';
26             },30);
27         }
28 
29     </script>
30 </head>
31 <body>
32     <div class="box" id="box"></div>
33 </body>
34 </html>
View Code

2、异步操作

3、函数缓冲与节流

二、定时器的类型与语法

1、setTimeout只执行一次的定时器,指定的毫秒数后执行指定的代码

 语法：setTimeout(函数名code，延迟时间time)；

参数说明：code:指定毫秒数后要执行的函数或js代码

　　　　　  time:指定毫秒数

实例：3秒后页面跳转到百度首页

　　　　setTimeout(function(){

　　　　　　location.href = "https://www.baidu.com";

　　　　},3000);

实例：弹框，效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .pop_con{
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background: rgba(0,0,0,0.3);
            z-index: 999;
            display: none;
        }
        .pop{
            width:380px;
            height:180px;
            border:1px solid #ccc;
            position:fixed;
            left:50%;
            top:50%;
            margin-top:-150px;
            margin-left:-250px;
            padding:10px;
            border-radius: 15px;
            box-shadow: 1px 1px 20px 1px #333;
            background:#fff;
            z-index: 9999;
            overflow: auto;
            animation: popTip 0.3s;
        }
        .pop_title{
            display: flex;
            justify-content: space-between;
        }
        .pop_title a{
            width:30px;
            height:30px;
            background:#E26359;
            border-radius: 15px;
            color:#fff;
            text-align: center;
            line-height: 30px;
            transition: all 1s ease;
        }
        .pop_title a:hover{
            transform:rotate(360deg);
            cursor: pointer;
        }
        .pop_message{
            height:100px;
            text-align: center;
            line-height: 100px;
        }
        .pop_confirm{
            text-align: center;
        }
        .pop_confirm button{
            width:100px;
            border:0;
            background: #E26359;
            color:#fff;
            padding:10px 0;
            border-radius: 15px;
            cursor: pointer;
            outline: none;
        }
        @keyframes popTip {
            0%{
                width:100px;
                height:20px;
            }
            100%{
                width:380px;
                height:180px;
            }
        }
    </style>
    <script>
        window.onload = function(){
            var oPop = document.getElementById("pop_con");
            var oMessage = document.getElementById("message");
            var oConfirm = document.getElementById("confirm");
            var oPopout = document.getElementById("popOut");
            function myPop(){
                oPop.style.display = "block";
                oMessage.innerHTML = "请输入数字";
                oConfirm.onclick = function(){
                    oPop.style.display = "none";
                };
                oPopout.onclick = function(){
                    oPop.style.display = "none";
                };
            }
            setTimeout(myPop,3000);
        }
    </script>
</head>
<body>
<h3>弹框信息</h3>
<div class="pop_con" id="pop_con">
    <div class="pop" id="pop">
        <div class="pop_title">
            <p>提示信息</p>
            <a id="popOut">X</a>
        </div>
        <div class="pop_message">
            <p class="message" id="message">输入框不能为空</p>
        </div>
        <div class="pop_confirm">
            <button id="confirm">朕知道了</button>
        </div>
    </div>
</div>

</body>
</html>
View Code

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

要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量：

　　   

3、setInterval反复执行的定时器（每隔指定的毫秒数不停地执行指定的代码）

语法:setInterval(code,time);

参数说明:

　　　　code为每隔指定的毫秒数要执行的函数或js代码

　　　　time是指定的毫秒数

实例：倒计时，效果图如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器倒计时</title>
 6     <script>
 7         window.onload = function(){
 8            var oBox = document.getElementById('box');
 9             function timeleft(){
10                 var now = new Date();
11                 //实际开发中，now和future都要从服务器获取，否则的话用户修改系统时间会出现bug
12                 var future = new Date(2017,6,17,14,0,0);
13                 //把毫秒/1000转换为秒
14                 var lefts = parseInt((future-now)/1000);
15                 var days = parseInt(lefts/86400);
16                 var hour =parseInt((lefts%86400)/3600);
17                 var min = parseInt(lefts%86400%3600/60);
18                 var sec = lefts%60>9?lefts%60:"0"+lefts%60;
19                 str = '距离2017年7月17日下午2点还剩下'+days+'天'+hour+'时'+min+'分'+sec+'秒';
20                 if(lefts<0){
21                     window.location.href="http://www.baidu.com";
22                 }
23                 oBox.innerHTML = str;
24             }
25             timeleft();
26             setInterval(timeleft,1000);
27         }
28 
29     </script>
30 </head>
31 <body>
32     <div class="box" id="box"></div>
33 </body>
34 </html>
倒计时代码

实例：动态时钟，效果图如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器时钟</title>
    <script>
        window.onload = function(){
            var oBox = document.getElementById("box");
            function timego(){
                var today = new Date();
                var year = today.getFullYear();
                var month = today.getMonth()+1;
                var day = today.getDate();
                var week = today.getDay();
                var hour = today.getHours();
                var minutes = today.getMinutes()>9?today.getMinutes():"0"+today.getMinutes();
                var seconds = today.getSeconds()>9?today.getSeconds():"0"+today.getSeconds();
                //var HMS = today.toLocaleTimeString();返回结果为：上午11:50:08
                str = "当前时间是:"+year+"年"+month+"月"+day+"日"+" "+toweek(week)+" "+hour+":"+minutes+":"+seconds;
                oBox.innerHTML = str;
            }
            timego();
            setInterval(timego,1000);
            function toweek(n){
                switch(n){
                    case 0:
                        return "星期天";
                    break;
                    case 1:
                        return "星期一";
                    break;
                    case 2:
                        return "星期二";
                        break;
                    case 3:
                        return "星期三";
                        break;
                    case 4:
                        return "星期四";
                        break;
                    case 5:
                        return "星期五";
                        break;
                    case 6:
                        return "星期六";
                        break;
                }
            }
        }

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

4、clearInterval关闭反复执行的定时器，停止 setInterval() 方法执行的函数代码

要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量：

　　

　　　　  

三、setInterval()和setTimeout的区别

前者会不停的循环执行，而后者只会执行一次

四、日期时间写法

 

posted @ 2016-10-23 16:47  小Q的博客  阅读(2704)  评论(0)  编辑  收藏  举报