js进度条功能

最新推荐文章于 2024-05-02 09:34:08 发布

linlinlove2

最新推荐文章于 2024-05-02 09:34:08 发布

阅读量1.1k

点赞数

文章标签： javascript php 开发语言后端 apache

本文链接：https://blog.csdn.net/withkai44/article/details/123982316

版权

<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>

linlinlove2

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js进度条功能

<body> <div class="fa"> <div class="son"> <span>0</span><span>%</span> </div> </div> <button id = 'but'>安装</button></body> <style>
复制链接

扫一扫