zoukankan html css js c++ java

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的区别

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

四、日期时间写法

查看全文

相关阅读:
1052 Linked List Sorting (25 分)
1051 Pop Sequence (25 分)
1050 String Subtraction (20 分)
1049 Counting Ones (30 分)
1048 Find Coins (25 分)
1047 Student List for Course (25 分)
1046 Shortest Distance (20 分)
1045 Favorite Color Stripe (30 分)
1044 Shopping in Mars (25 分)
1055 The World's Richest (25 分)

原文地址：https://www.cnblogs.com/qijunjun/p/5990312.html