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

時間 2019-12-10

標籤定時器以及幾個案例简体版

原文原文鏈接

定時器

延遲執行，週期執行

延遲執行

<!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>