定时器以及定时器的几个案例

2024年5月28日 112次阅读 来源: 李通

定时器

延迟执行 ，周期执行

  • 延迟执行
<!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>
    原文作者：李通
    原文地址: https://segmentfault.com/a/1190000016270909
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞