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

news2024/10/10 15:41:03

创建一个动态任务进度条：进阶版实现

在现代网页开发中，任务进度条是用户交互中非常重要的组件，它能够直观地展示任务的进展情况。本文将向你展示如何使用 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 事件，实时更新进度条的宽度。