【进阶版】如何实现一个基于 HTML+CSS+JS 的使命进度条 - ToB企服应用市场:ToB评测及商务社交产业平台

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态任务进度条</title>
<style>
/* CSS 样式将在此处定义 */
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<div class="progress-text">
进度：<input type="text" value="0">%
</div>
</div>
<script>
// JavaScript 代码将在此处定义
</script>
</body>
</html>

复制代码

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.progress-container {
width: 600px;
}
.progress-bar {
width: 100%;
height: 25px;
background-color: grey;
border-radius: 5px;
}
.progress-fill {
width: 0;
height: 100%;
background-color: green;
border-radius: 5px;
/* 填充过渡动画 */
transition: width .5s ease-in-out;
}
.progress-text {
margin-top: 5px;
text-align: center;
}
.progress-text input {
width: 28px;
border: none;
outline: none;
border-bottom: 1px solid #ccc;
text-align: center;
font-weight: 800;
color: #ff8c00; /* 深橙色 */
}

复制代码

// 进度条(背景板)
const progressBar = document.querySelector('.progress-container .progress-bar');
// 进度条填充
const progressFill = progressBar.querySelector('.progress-fill');
// 进度条文字
const progressText = document.querySelector('.progress-text');
const inputText = progressText.querySelector('input');
// 给进度条数字变化添加动画，依次升高，或者从依次降低
// input:目标表单元素
//value:表单元素目标值
function numberAni(input, value) {
// 计算差值，好计算执行时间
let diff = Math.floor(value - input.value);
// 总共0.5s，500ms进度条移动完成->数字变化完成
let interval = 500 / diff;//间隔多少毫秒，数字变化1
if (value == input.value) {
return;
}
else if (value > input.value) {
const timerId = setInterval(() => {
// 表单元素的value值都是字符串，所以计算要进行转换
input.value = Number(input.value) + 1;
// console.log(typeof(input.value))
// if判断中的input.value仍是字符串，虽然上面计算之后转成了number,但是内部自动转换成了
if (input.value == value) {
clearInterval(timerId);
}
}, interval)
} else {
const timerId = setInterval(() => {
// 表单元素的value值都是字符串，所以计算要进行转换
input.value = Number(input.value) - 1;
// console.log(typeof(input.value))
// if判断中的input.value仍是字符串，虽然上面计算之后转成了number,但是内部自动转换成了
if (input.value == value) {
clearInterval(timerId);
}
}, interval)
}
}
// 给进度条添加事件监听
progressBar.addEventListener('click', (event) => {
// event.offsetX是鼠标坐标相当于父容器的偏移量
console.log(event);
const offsetX = event.offsetX;
// 这里也可以用getComputed获取 getComputed获取的都是绝对单位px，不管样式是怎么设置的，获取都会转换成绝对单位px
// const temp = getComputedStyle(progressBar).width;
// alert(temp)
// const tempNum = parseFloat(temp);//转换成整数，去掉单位px
// 获取进度条的总宽度，以计算百分比这里用offsetWidth获取，因为.style.width获取的是元素行内样式，而且offsetWidth不会带单位，方便计算
const barWidth = progressBar.offsetWidth;
// 计算百分比
const persent = Math.round((offsetX / barWidth) * 100);//round取整会自动四舍五入
// 设置进度条填充宽度
progressFill.style.width = persent + '%';
console.log(barWidth)
// 更新进度条文字
numberAni(inputText, persent)
// inputText.value = persent;
});
// 给input添加input事件监听器，当值发送变化时执行对应的操作
// input事件：当输入框的内容发生变化时就会触发该事件，不需要等元素失去焦点，实时性更强
// change事件：必须有修改之后（数据前后不相同视为修改），还要失去焦点，才会触发
inputText.addEventListener('input', (event) => {
const persent = Math.round(event.target.value)
// 进度条跟着移动
progressFill.style.width = persent + '%';
});

复制代码