<style>
#but {
padding: 6rpx 20rpx;
background-color: lightseagreen;
color: white;
border: 0;
border-radius: 10rpx;
margin-bottom: 40rpx;
cursor: pointer;
}
.border {
/* width: 800rpx; */
height: 80rpx;
border: 2rpx solid black;
border-radius: 20px;
overflow: hidden;
}
#son {
width: 0;
height: 100%;
text-align: center;
line-height: 80rpx;
background-color: goldenrod;
}
</style>
<template>
<view class="" style="box-sizing: border-box;">
<button id="but" @click="onclick">开始</button>
<view class="border">
<view id="son">
<span>0</span><span>%</span>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timer: null
}
},
methods: {
onclick() {
console.log(this.timer)
if (this.timer) {
return false
}
if (this.timer == null) {
//设置timer == null 是为了保证按钮只能点击一次
let son = document.getElementById('son')
let but = document.getElementById('but')
let span = document.getElementsByTagName('span')
let num = 0
this.timer = setInterval(() => {
num += 10
//给宽进行递增
son.style.width = num + 'px'
//给百分比进行递增 使用Math.ceil() 是为了防止百分比有小数
span[0].innerHTML = Math.ceil(num / 400 * 100)
if (num == 400) {
//给百分比进行递增 使用Math.ceil() 是为了防止百分比有小数
clearInterval(this.timer)
son.style.width = ""
span[0].innerHTML = 0
this.timer=null
}
}, 50)
}
}
}
}
</script>
自定义进度条
最新推荐文章于 2023-12-16 23:54:00 发布