每天一个效果：（8）进度条功能

最新推荐文章于 2023-10-11 13:47:04 发布

liuyang___

最新推荐文章于 2023-10-11 13:47:04 发布

阅读量1.3k

点赞数 5

分类专栏： css样式 js学习积累文章标签： javascript html css 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/123942639

版权

js学习积累同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

css样式

18 篇文章 0 订阅

订阅专栏

今天我们来写一个进度条逐渐加载的功能，比如安装一个软件，可以点击安装，进度条会持续加载，数字会逐渐上升。

我们先来看一下HTML和css代码


<body>
    <div class="fa">
        <div class="son">
            <span>0</span><span>%</span>
        </div>
    </div>
    <button id = 'but'>安装</button>
</body>

 <style>
        .fa {
            width: 400px;
            margin-bottom: 30px;
            border: 1px solid red;
        }
        .son {
            width: 100px;
            height: 40px;
            background-color: rgb(231, 234, 39);
            text-align: center;
            line-height: 40px;
        }
    </style>

接着我们来看一下效果

我先把这这个背景改了一下，先有个效果，一会写的时候，把子盒子里面的背景宽改成0就可以了

我们接着写一下js代码，说一下逻辑，1肯定是先用定时器去操作，2当到达400px时候，让定时器停止，就这么简单。我们先获取一下but和div，因为要给but一个点击事件，接着定义一个自增，之后我们直接写出定时器，然后给定时器定义1秒一自增。在里面也别忘了给宽递增。先看看代码和效果

   <script>
        //逻辑：1.利用定时器来进行递增操作（width，百分数）
        //当变量  当到400px的时候，要停止定时器
        let but = document.getElementById('but');
        let div = document.getElementsByTagName('div');
        
        but.onclick = function(){
            let num = 0;
            //定时器
            setInterval(() => {
                num +=10;
                //给宽进行递增
                div[1].style.width = num+'px';
            }, 1000);
        }

    </script>

这样我们会发现，黄颜色的盒子会自己往前运动，但细心的娃会发现，他不会停住，而且数字也没变化。而且还有一种情况就是，用户还会多次点击按钮，所以我们也不能让用户每一次点击，都去重新的加载。

这么多问题，我一一解决奥~我们加一个判断，如果num增加到400，就不让他继续增加了。

解决用户连续点击，就是在最外层加一个判断，我们在让定时器停止时，肯定会给setInterval一个名字，所以我们就在这里做文章，在最外层，加一个判断，这样就可以了~

值的改变就更好办了，直接将给span重新赋值就可以了，但是切记，这里要给一个取整。

我们来看一下代码和效果

    <script>
        //逻辑：1.利用定时器来进行递增操作（width，百分数）
        //当变量  当到400px的时候，要停止定时器
        let but = document.getElementById('but');
        let div = document.getElementsByTagName('div');
        let span = document.getElementsByTagName('span');
        let timer = null
        but.onclick = function () {
            let num = 0;
            if (timer == null) {

                //定时器
                 timer = setInterval(() => {
                    num += 10;
                    //给宽进行递增
                    div[1].style.width = num + 'px';
                    //给百分比递增
                    span[0].innerText = Math.ceil(num/400*100);
                    if (num == 400) {
                        clearInterval(timer);
                    }
                }, 100);
            }

        }

    </script>

今天的效果就做到这了，我们明天再见，今天好累啊，哭~

liuyang___

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
每天一个效果：（8）进度条功能

今天我们来写一个进度条逐渐加载的功能，比如安装一个软件，可以点击安装，进度条会持续加载，数字会逐渐上升。我们先来看一下HTML和css代码<body> <div class="fa"> <div class="son"> <span>0</span><span>%</span> </div> </div> &l
复制链接

扫一扫