定時器以及定時器的幾個案例

李通發表於2019-02-16
定時器

定時器

延遲執行 ，週期執行

  • 延遲執行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延遲執行</title>
</head>
<body>
<script>
    console.log(`this is mseeage`);//列印一段文字作為對比
    var t =setTimeout(function () {
        console.log(`this is a setTimeout`);//延遲1234毫秒
    },1234)
</script>
</body>
</html>
  • 週期執行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>週期執行</title>
</head>
<body>
<script>
    console.log(`this is message...`);
    /*
    * setInterval(function,delay)方法
    * 作用-設定一個週期執行的定時器
    * 引數
    * function-標識延遲執行的程式碼邏輯
    * delay-標識延遲執行的時間，單位為毫秒
    * 返回值-表示當前定時器的標識
    * */
    /*
    * setInterval (function(){
    * console.log(`this is interval...`);},1000);
    * */
    /*function fun(){
    console.log(`this is interval... `);
    setTinmaout(fun,1000);}
   fun();*/
    (function fun() {
        console.log(`this is interval...`);
        setTimeout(fun, 1);
        //setTimeout(arguments.callee,1000);
    })();

console.log(`this is message too...`);
</script>
</body>
</html>

案例

  • 動態顯示時間
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態顯示時間</title>
</head>
<body>
<button id="start">開始顯示</button>
<button id="stop">停止顯示</button>
<h2 id="showtime"></h2>
<script>
    var t;//表示定時器的標識
    var start =document.getElementById(`start`);
    start.addEventListener(`click`,showTime);

    var stop=document.getElementById(`stop`);
    stop.addEventListener(`click`,function () {
        clearTimeout(t);
        start.removeAttribute(`disabled`);
    });
    //定義一個函式-完成獲取時間並顯示的功能
    function showTime(){
        start.setAttribute(`disabled`,`disabled`);
        //獲取時間
        var date=new Date();
        var hour =date.getHours();
        var minute =date.getMinutes();
        var second =date.getSeconds();
        //格式化當前時間
        var time =hour+`:`+minute+`:`+second;
        var showtime=document.getElementById(`showtime`);
        showtime.textContent=time;
        //設定一個定時器
        t=setTimeout(showTime,1000);
    }
</script>
</body>
</html>
  • 方塊自動移動
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方塊自動移動</title>
    <style>
        body{
            margin: 0;
        }
        #box{
            width: 50px;
            height: 50px;
            background-color: yellow;

            position: absolute;
            top: 300px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box =document.getElementById(`box`);
    box.addEventListener(`click`,isMove);
    //定義一個標識-標識時停止還是移動
    var flag=false;//表示停止
    var t;//定時器的表示
    //判斷當前方塊的狀態
    function isMove(){
        if (!flag){//如果停止就移動
            //將標識設定為true-表示移動
            flag=true;
        move();
        }else {//如果移動就停止
            flag=false;
        stop();
        }
    }
    //實現方塊移動邏輯
    function move() {
        //1獲取當前方塊的left樣式屬性值
        var style = window.getComputedStyle(box);
        var left = parseInt(style.left);
        //2增加left樣式屬性值
        left++;
        //3利用內聯樣式覆蓋外聯樣式
        box.style.left = left + `px`;
        //設定定時器
        t = setTimeout(move, 5);

    }
    //實現方塊停止邏輯
    function stop() {
        clearTimeout(t)
    }
</script>
</body>
</html>
  • 小球垂直移動
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球垂直移動</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: lightcoral;
            border-radius: 25px;

            position: absolute;
            left: 400px;
            top: -50px;
        }
    </style>
</head>
<body>
<!--<div id="box"></div>-->
<script>
    // var box = document.getElementById(`box`);

    var body = document.body;//獲取body屬性
    const WIDTH = window.innerWidth;//建立一個常量寬度=視窗寬度
    // 向頁面中建立小球
    function createBox(){//封裝一個函式
        var div = document.createElement(`div`);
        div.setAttribute(`class`,`box`);
        var random = Math.random() * (WIDTH - 50);
        div.style.left = random + `px`;
        body.appendChild(div);
    }
    // 控制小球向下移動
    function moveDown(){
        var boxs = document.getElementsByClassName(`box`);
        for (var i=0; i<boxs.length; i++) {
            var box = boxs[i];
            var style = window.getComputedStyle(box);
            var boxTop = parseInt(style.top);
            boxTop += 10;
            box.style.top = boxTop + `px`;
        }
    }
    // 建立多個小球
    for (var i=0; i<10; i++) {
        createBox();// 建立一個小球
    }

    setInterval(function(){
        moveDown();
    },500);

</script>
</body>
</html>

相關文章