web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图

最新推荐文章于 2022-11-02 13:03:24 发布

zhaihaohao1

最新推荐文章于 2022-11-02 13:03:24 发布

阅读量1.2k

点赞数 4

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/102593574

版权

本文介绍了JavaScript中的定时器函数setInterval和setTimeout，包括它们的基本语法和应用场景。通过倒计时和动画效果的案例，如向左、向右移动动画及轮播图的实现，详细展示了它们的用法。同时，提到了如何封装移动动画函数以及实现轮播图的点击切换和自动播放功能。

摘要由CSDN通过智能技术生成

文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

setInterval();

定时执行函数 setInterval 无限次的执行，要通过 clearInterval() 停止

基本语法
每1秒执行一次，无限次的执行
通过 clearInterval() 停止

		let timer = setInterval(function () {
			console.log('无限执行');
		}, 1000);

        // clearInterval(timer);

setTimeout();

基本语法

延时1秒后执行，执行一次

通过 clearTimeout() 停止执行

        let time2 = setTimeout(function(){
            console.log('执行一次');
        }, 1000);

        //clearTimeout(time2);

应用：

案例1：倒计时

分别使用 setInterval() 和 setTimeout 写个倒计时

setInterval() 实现倒计时

        // 这里写一个倒计时
        function daojishi1() {
            let time = 10;
            let countdown = setInterval(function () {
                time--;

                if (time == 0) {
                    // 停止执行
                    clearInterval(countdown);
                } else {
                    console.log(time);
                }
            }, 1000);
        }
        daojishi1();

setTimeout() 实现倒计时

        let jjj = 10;

        function daojishi2() {
            let daojishi = setTimeout(function () {
                --jjj;
                if (jjj == 0) {
                    // 停止执行
                    clearTimeout(daojishi);
                } else {
                    console.log(jjj);
                    // 递归调用
                    daojishi2();
                }

            }, 1000);

        }

        daojishi2();

案例2：封装一个移动动画的函数：

2.1 实现向右移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        #box {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
        }
        
        #line {
            width: 1px;
            height: 100%;
            background-color: black;
            position: absolute;
            left: 800px;
        }
    </style>
</head>

<body>
    <div>
        <button id="kaishi">开始</button>
        <button id="jieshu">停止</button>
    </div>
    <!-- 定时器动画效果 -->
    <div id="box">完成一个动画效果</div>
    <div id="line"></div>

    <script>
        let kaishi = document.getElementById('kaishi');
        let jieshu = document.getElementById('jieshu');
        let box = document.getElementById('box');
        let timer;
        kaishi.onclick = function() {
            clearInterval(timer);
            timer = setInterval(function() {
                // 当前生效的属性
                let leftShengXiao = parseInt(getStyle(box, 'left'));
                let leftDistance = leftShengXiao + 30;
                if (leftDistance >= 800) {
                    leftDistance = 800;
                }
                // 向右移动，就是改变离左边的距离
                box.style.left = leftDistance + 'px';
                if (leftDistance == 800) {
                    clearInterval(timer);
                }
            }, 30);

        }

        jieshu.onclick = function() {
            clearInterval(timer);

        }

        /*
         * 定义一个函数，用来获取指定元素的当前的样式
         * 参数：
         * 		obj 要获取样式的元素
         * 		name 要获取的样式名
         */
        function getStyle(obj, name) {

            if (window.getComputedStyle) {
                //正常浏览器的方式，具有getComputedStyle()方法
                return getComputedStyle(obj, null)[name];
            } else {
                //IE8的方式，没有getComputedStyle()方法
                return obj.currentStyle[name];
            }

        }
    </script>





</body>

</html>

2.2实现向左，或向右移动，封装成一个函数