＜JavaScript＞DOM-定时器和延时器

最新推荐文章于 2022-05-31 19:17:00 发布

BBBourne

最新推荐文章于 2022-05-31 19:17:00 发布

阅读量256

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Jason6620/article/details/120998454

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1.定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="info"></h1>
    <button id="btn1">开始</button>
    <button id="btn2">暂停</button>
    
    <script>
        var oInfo=document.getElementById('info');
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');

        var a=0;
        // 全局变量
        var timer;
        oBtn1.onclick=function(){
            // 防止定时器叠加，在设置定时器之前应该清除定时器
            clearInterval(timer);
            timer=setInterval(function(){
                oInfo.innerText=++a;
            },1000);
        }

        oBtn2.onclick=function(){
            clearInterval(timer);
        }
    </script>
</body>
</html>

2.延时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">2s后弹出你好</button>    
    <button id="btn2">取消弹出</button>    

    <script>
        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        var timer;

        oBtn1.onclick=function(){
            timer=setTimeout(function(){
                alert('hello');
            },2000);
        }
        oBtn2.onclick=function(){
            clearTimeout(timer);
        }
    </script>
</body>
</html>

2.1 异步语句

3.使用定时器实现动画(×) 使用CSS+JS实现动画(√)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <button id="btn">点我运动</button>
    <div id="box"></div>

    <script>
        var btn=document.getElementById('btn');
        var box=document.getElementById('box');
        // 标示量，指示当前盒子在左边还是右边
        var pos=1;
        // 函数节流锁
        var lock=true;

        btn.onclick=function(){
            // 首先检查锁是否关闭
            if(!lock)return;
            // 过渡
            box.style.transition='all 2s linear 0s';
            if(pos==1){
                // 瞬间移动，因为有过渡，所以是动画
                box.style.left='1100px';
                pos=2;
            }else if(pos==2){
                // 瞬间移动，因为有过渡，所以是动画 
                box.style.left='100px';
                pos=1;
            }
            // 关锁
            lock=false;

            setTimeout(function(){
                lock=true;
            },2000);
        }
    </script>
</body>
</html>

3.1 无缝连续滚动特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 1000px;
            height: 130px;
            border: 1px solid #000;
            margin: 50px auto;
            overflow: hidden;
        }
        .box ul{
            list-style: none;
            /* 设置大一点 能让li浮动 */
            width: 5000px;
            position: relative;
        }
        .box ul li{
            float: left;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="box" class="box">
        <ul id="list">
            <li><img src="images/number/0.png" alt=""></li>
            <li><img src="images/number/1.png" alt=""></li>
            <li><img src="images/number/2.png" alt=""></li>
            <li><img src="images/number/3.png" alt=""></li>
            <li><img src="images/number/4.png" alt=""></li>
            <li><img src="images/number/5.png" alt=""></li>
        </ul>
    </div>
    <script>
        var box=document.getElementById('box');
        var list=document.getElementById('list');

        list.innerHTML+=list.innerHTML;

        var left=0;
        
        var timer;

        move();

        function move(){
            // 设表先关，防止动画累计
            clearInterval(timer);
            timer=setInterval(function(){
                left-=4;
                if(left<=-1260){
                    left=0; 
                }
                list.style.left=left+'px';
            },20);
        }

        
        // 鼠标进入停止定时器
        box.onmouseenter=function(){
            clearInterval(timer);
        };

        box.onmouseleave=function(){
            move();
        }
    </script>
</body>
</html>