JS（六）定时器和变量的作用域

码界索隆

于 2022-03-09 20:47:44 发布

阅读量934

点赞数 2

文章标签： javascript css3 html

本文链接：https://blog.csdn.net/cool66boy/article/details/123372820

版权

文章目录

定时器
变量作用域
- 全局变量
- 局部变量

定时器

定时器在JavaScript中的作用

制作动画
异步操作
函数缓冲与节流

定时器类型及语法

setTimeout(函数名或匿名函数,延迟时间(单位ms)) ：只执行一次的定时器
clearTimeout(定时器名)：关闭只执行一次的定时器
setInterval(函数名或匿名函数,延迟时间(单位ms))：反复执行的定时器
clearInterval(定时器名)：关闭反复执行的定时器
注：不需要写单位

练习

制作反复移动动画

<!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>移动动画</title>
    <style>
        div{
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: chocolate;
            top: 100px;
            left: 0;
        }
    </style>
    <script>
        window.onload = function(){
            var sBox = document.getElementById('box');
            var box_left = sBox.style.left;
            var left_num = 0;
            var speed = 50;
            //只执行一次向左移动
            // var Once_move = setTimeout(function(){
            //     sBox.style.left = '200px';
            // },1000);
        //     clearTimeout(Once_move);//放在Once_move后面，Once_move不执行，放在前面则仍会执行。
        // }
            var More_move = setInterval(function(){
                left_num+= speed;
                sBox.style.left = left_num + 'px';
                if(left_num>1336){
                    speed = -50;
                }
                else if(left_num<0){
                    speed = 50;
                }
            },200);
            // clearInterval(More_move);//放在More_move后面，More_move不执行，放在前面则仍会执行。
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

最终盒子左右往返运动
注： // clearTimeout(Once_move);//放在Once_move后面，Once_move不执行，放在前面则仍会执行。 // clearInterval(More_move);//放在More_move后面，More_move不执行，放在前面则仍会执行。

定时器制作图片无缝往返滚动播放

实现的功能有：
1. 图片的无缝循环播放。
2. 鼠标移上图片，会在当前位置停下。移开后会在当前位置开始与之前一样的方向播放图片。
3. 左右有向左向右箭头，点击后分别想对应的方向循环播放图片

<!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>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3233091_vbj8k8jhtk.css">
    <style>
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        h1{
            text-align: center;
            color: pink;
        }


        #box{
            position: fixed;
            overflow: hidden;
            width: 400px;
            height: 500px;
            box-sizing: content-box;
            border: 20px solid pink;
            border-radius: 5px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

        .iconfont{
            color: pink;
            font-size: 50px;
            font-weight: bold;
        }

        .icon-xiangyou1{
            position: fixed;
            top: 350px;
            right: 490px;

        }

        .icon-xiangzuo1{
            position: fixed;
            top: 350px;
            left: 490px;
        }

        #container{
            position: absolute;
            width: 3200px;
        }

        img{
            float: left;
            width: 400px;
        }
    </style>
    <script>
        window.onload = function(){
            var sContainer = document.getElementById('container');
            var sLeft_move = document.getElementById('left_move');
            var sRight_move = document.getElementById('right_move');
            var left_num = 0;
            var preSpeed = 0;
            var Speed = 1;
            sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;
            var img_move = setInterval(function(){
                left_num -= Speed;
                if(left_num < -1600){
                    left_num = 0;
                }

                else if(left_num>0){
                    left_num = -1600;
                }
                sContainer.style.left = left_num + 'px';
            },15)
            sLeft_move.onclick = function(){
                Speed = 1;
            }

            sRight_move.onclick = function(){
                Speed = -1;
            }

            sContainer.onmouseover =function(){
                preSpeed = Speed;
                Speed = 0;
            }

            sContainer.onmouseout =function(){
                Speed = preSpeed;
            }

            // clearInterval(img_move);
        }
    </script>
</head>
<body>
    <h1>最美女神jisoo</h1>
    <i class="iconfont icon-xiangzuo1" id="left_move"></i>
    <div id="box">
        <div id="container" class="clearfix">
            <img src="./img/img1.jpg" alt="">
            <img src="./img/img2.jpg" alt="">
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.jpg" alt="">
        </div>
    </div>
    <i class="iconfont icon-xiangyou1" id="right_move"></i>
</body>
</html>

效果图：
在这里插入图片描述
注：这是gif图实际效果更顺滑。

关键在于图片内容的整体复制sContainer.innerHTML = sContainer.innerHTML + sContainer.innerHTML;，然后再拉回if(left_num == -1600){ left_num = 0; }；这才实现了无缝滚动。

总结：
1.Speed的设置非常关键，为了不同事件的触发。
2. 使用onmousemove和onmouseleave事件无法实现移开后，继续播放，仍有疑问，不懂原理。

定时器制作时钟

<!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>时钟</title>
    <script>
        window.onload = function(){
            var sTime = document.getElementById('time');
            function timeGo(){
                // 获取当前时间
                var now_time = new Date();
                // 获取年
                var year = now_time.getFullYear();
                // 获取月份
                var Month = now_time.getMonth()+1;
                //获取日子
                var day = now_time.getDate();
                //获取星期
                var Weeeks = now_time.getDay();
                //获取时
                var Hours = now_time.getHours();
                //获取分
                var Minutes = now_time.getMinutes();
                //获取秒
                var Seconds = now_time.getSeconds();
                
                // var sTr = '当前时间是'+ year + '年' + Month + '月' + day + '日' + 
                // '星期' + Weeeks_change(Weeeks) + Hours + '时' + Minutes + '分' + Seconds + '秒';
                var sTr = '当前时间是'+ year + '年' + Month + '月' + day + '日' + 
                '星期' + Weeeks_change(Weeeks) + one_two(Hours) + ':' + one_two(Minutes) + ':' + one_two(Seconds);

                sTime.innerHTML = sTr;
            }

            function Weeeks_change(Weeeks){
                switch(Weeeks){
                    case 1:
                        return '一';
                    case 2:
                        return '二';
                    case 3:
                        return '三';
                    case 4:
                        return '四';
                    case 5:
                        return '五';
                    case 6:
                        return '六';
                    case 7:
                        return '天';
                }
            }

            function one_two(a){
                if(a<10){
                    return '0' + a;
                }
                return a;
            }

            timeGo();
            setInterval(timeGo,1000);

        }

    </script>
    <style>
        #time{
            color: lightcoral;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 300px;
        }
    </style>
</head>
<body>
    <div id="time">
    </div>
</body>
</html>

效果图：
在这里插入图片描述
注：时间会实时更新

总结：
1. new Date（）获取的时间时国际显示，因此需要清洗数据。
2. getMonth和getDay方法是0开始计算的，即：0~11 和 0~6。且getDay里的0代表星期天。
3. 执行定时器时会有一个空白期，因此要提前执行一次，来填补空白期。

定时器制作倒计时

<!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>倒计时</title>
    <style>
        #countdown{
            color: lightcoral;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin-top: 300px;
        }
    </style>
    <script>
        window.onload = function(){
            var sCountTime = document.getElementById('countdown');
            function CountDown_Go(){
                //获取现在时间
                var now_time = new Date();
                // 设置未来时间
                var future_time = new Date(2022,4,1,0,0,0);
                //计算所需时间,单位s
                var Count = parseInt((future_time-now_time)/1000);
                //计算多少天
                var Days = parseInt(Count/86400);
                //计算多少小时
                var Hours = parseInt(Count%86400/3600);
                //计算多少分钟
                var Minutes = parseInt(Count%86400%3600/60);
                //计算还有多少秒
                var Seconds = parseInt(Count%86400%3600%60);

                var sTr = '距离五一小长假还有' + Days + '天' + Hours + '小时' + 
                one_two(Minutes) + '分' + one_two(Seconds) + '秒';
                
                sCountTime.innerHTML = sTr;
            }
            CountDown_Go();//提前执行一次，将定时器的空白期填上；
            setInterval(CountDown_Go,1000);
            function one_two(a){
                if(a<10){
                    return '0' + a;
                }
                return a;
            }
        }
        
    </script>
</head>
<body>
    <div id="countdown">

    </div>
</body>
</html>

效果图：
在这里插入图片描述

弹框

要求：

倒计时关闭弹框。
其中的倒计时通过多次执行的定时器来完成。

<!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>
        #tanchu{
            width: 350px;
            height: 450px;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            text-align: center;
            border: 3px solid salmon;
            border-radius: 4px;
            display: none;
            background-color: #fff;
        }

        #tanchu p{
            color: red;
        }

        #muceng{
            position: fixed;
            background-color: black;
            opacity: 0.4;
            width:100%;
            height: 100%;
            display: none;
                }
    </style>
    <script>
        window.onload = function(){
            var sHaif_transparent = document.getElementById('muceng');
            var sPop_up = document.getElementById('tanchu');
            var iNum = document.getElementById('num');
            var i=5;
            setTimeout(function(){
                sHaif_transparent.style.display = 'block';
                sPop_up.style.display = 'block';
            },1000);

            var countdown_num = setInterval(function(){
                iNum.innerHTML = i;
                i--;
                if(i<0){
                    sHaif_transparent.style.display = 'none';
                    sPop_up.style.display = 'none';
                    clearInterval(countdown_num);
                }

            },1000);

        }
    </script>
</head>
<body>
    <div class="container">
        <div id="muceng"></div>
        <p>这是内容1</p>
        <p>这是内容2</p>
        <p>这是内容3</p>
        <p>这是内容4</p>
        <p>这是内容5</p>
        <div id="tanchu">
            <h1>这是个弹框</h1>
            <p>还有 <span id="num"></span>s弹窗关闭</p>
        </div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

变量作用域

变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。

全局变量

在函数之外定义的变量，为整个网页公用，函数内部外部都可以访问。

局部变量

在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

码界索隆

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS（六）定时器和变量的作用域

文章目录定时器定时器在JavaScript中的作用定时器类型及语法练习制作反复移动动画定时器制作图片无缝往返滚动播放定时器制作时钟定时器制作倒计时弹框变量作用域全局变量局部变量定时器定时器在JavaScript中的作用制作动画异步操作函数缓冲与节流定时器类型及语法setTimeout(函数名或匿名函数,延迟时间(单位ms)) ：只执行一次的定时器clearTimeout(定时器名)：关闭只执行一次的定时器setInterval(函数名或匿名函数,延迟时间(单位ms))：反复执行的定时
复制链接

扫一扫