自定义进度条

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