【进阶版】如何实现一个基于 HTML+CSS+JS 的使命进度条

伤心客 · 2024-10-9 17:48:13

创建一个动态使命进度条：进阶版实现

在当代网页开辟中，使命进度条是用户交互中非常紧张的组件，它可以或许直观地展示使命的进展情况。本文将向你展示如何使用 HTML、CSS 和 JavaScript 创建一个动态的使命进度条。在这个进阶版本中，用户不仅可以通过点击进度条来更新进度，还可以手动输入百分比值，进度条会相应地调整。
效果演示

这个进阶版的进度条支持以下功能：

点击进度条的任意位置，进度条会更新到相应的百分比。
在进度条下方的输入框中输入百分比值，进度条会实时更新。
输入框的数字厘革具有动画效果，提供更好的用户体验。

完备代码

以下是实现该进度条的完备代码，包括 HTML、CSS 和 JavaScript。
1. HTML 布局

我们界说了一个包含进度条和输入框的基本布局：

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

复制代码

2. CSS 样式

接下来，我们为进度条和输入框设置样式，以确保良好的用户体验和美观的外观：

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; /* 深橙色 */
}

复制代码

3. JavaScript 实现

末了，我们使用 JavaScript 来处置处罚用户的交互，包括点击进度条和输入框的厘革：

// 进度条(背景板)
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 + '%';
});

复制代码

代码剖析

HTML 布局：
- 进度条的容器 .progress-container 中包含了 .progress-bar 和 .progress-fill。
- 下方的 .progress-text 中包含一个输入框，用于显示当前的进度百分比。
CSS 样式：
- 进度条的外观由 .progress-bar 和 .progress-fill 控制。
- .progress-fill 通过 CSS 的 transition 属性实现了动态过渡效果。
JavaScript 交互：
- numberAni 函数用于平滑地改变输入框中的数字，从当前值渐渐厘革到目标值。
- 监听进度条的点击事件，根据点击位置计算百分比，并更新进度条和输入框。
- 监听输入框的 input 事件，实时更新进度条的宽度。

总结

通过以上步骤，你可以创建一个功能美满的动态使命进度条，用户可以通过点击和手动输入来更新进度。这种实现方式不仅美观，而且提升了用户体验，实用于各种应用场景，如下载进度、使命完成状态等。
希望本文对你有所资助！如果你有任何题目或建议，接待在品评区留言讨论。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【进阶版】如何实现一个基于 HTML+CSS+JS 的使命进度条

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云