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

最新推荐文章于 2023-08-18 16:49:12 发布

VIP文章 zhaihaohao1

最新推荐文章于 2023-08-18 16:49:12 发布

阅读量1.1k

点赞数 4

分类专栏： web前端2018

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

版权

文档：

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实现向左，或向右移动，封装成一个函数

<!DOCTYPE html&

最低0.47元/天解锁文章

zhaihaohao1

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setIntervalhttps://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeoutsetInterval();定时执行函数setInterval无限次的执行，要通过clearInterva...
复制链接

扫一扫