<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 20px;
border-radius: 4px;
margin: 100px auto;
border: 2px solid green;
position: relative;
}
#jinDuTiao {
height: 20px;
background: orange;
border-radius: 4px;
float: left;
}
#num {
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 5px;
}
</style>
</head>
<body>
<div class="box">
<div id="jinDuTiao" style="width: 0px;"></div>
<span id="num">0%</span>
</div>
<script>
/*
需用通过定时器 去改变 进度条宽度
在js中需要实现动画,就必须使用定时器
*/
var timer = setInterval(function () {
// 每执行一次定时器 进度条在原来的宽度基础上 + 10
// 获取 原来的宽度 jinDuTiao.style.width 得到是 '0px' 只想0数字
var style = parseInt(jinDuTiao.style.width);
// 定义一个变量用原来的值 +每次增加的值
var curStyle = style + 13;
// 当进度条的宽度为 800的时候,已经是 最大值
if (curStyle >= 800) {
// 当值大于800 的时候,直接让curStyle的 等于800
curStyle = 800;
// 当执行这个条件时候,进度条已经达到100%
// 定时器不需要在执行
// 清除定时器 this指向的w`在这里插入代码片`indow
clearInterval(timer)
}
// 在原来的基础上 + 10,在赋值给 元素的 宽度
jinDuTiao.style.width = curStyle + 'px';
// 给数字的元素添加left ,根据进度条的变化 而变化
num.style.left = curStyle + 2 + 'px';
// toFixed(2) 表示保留两位小数点
num.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
}, 100)
</script>
</body>
</html>
通过定时器去改变进度条宽度(进度条问题)
最新推荐文章于 2024-09-22 11:17:00 发布