进度条示例

进度条示例：

image

<!DOCTYPE html><html>
<head>    <meta charset="UTF-8">    <title>Progress Bar Example</title>    <style>        /* 进度条容器样式 */     .progress-container {            width: 200px;            height: 20px;            border: 1px solid #ccc;            position: relative;        }
        /* 进度条伪元素样式，使用CSS变量设置宽度 */     .progress-container::before {            content: attr(data-content);            position: absolute;            top: 0;            left: 0;            height: 100%;            background-color: orange;            width: var(--progress-width);            display: flex;            align-items: center;            justify-content: center;            color: white;            font-size: 12px;        }    </style></head>
<body>    <div id="progressContainer"></div>    <script>        function sendData() {            console.log("执行发送数据操作");            // 这里可以添加具体的发送数据相关代码，比如通过AJAX等方式发送表单数据等        }
        window.setProgress = function (current, content) {            const progressContainer = document.getElementById('progressContainer');            const total = 138;            const progressPercentage = (current / total) * 100;            const pseudoElement = progressContainer.style;            pseudoElement.setProperty('--progress-width', `${progressPercentage}%`);            progressContainer.style.setProperty('--progress-width', `${progressPercentage}%`);
            const beforeElement = document.querySelector('.progress-container::before');            if (current === total) {                content = '提交';                progressContainer.onclick = sendData;            }            progressContainer.setAttribute('data-content', content);        };
        setProgress(70, '进行中');
        // 假设在某个后续的条件满足或者函数调用时，要取消onclick事件绑定        
        function cancelOnclick() {            
        const progressContainer = document.getElementById('progressContainer');            progressContainer.onclick = null;        }
        // 调用取消绑定的函数示例        cancelOnclick();
    </script></body>
</html>