<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>
今天的文章js进度条功能分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/29060.html
