当前位置：首页 > news >正文

【web笔记】JavaScript实现有动画效果的进度条

news 2025/6/8 10:54:52

文章目录

1 实现效果
2 实现代码

1 实现效果

在这里插入图片描述

2 实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><style>#progress {width: 300px;height: 20px;border-radius: 0; /* 移除圆角 */-webkit-appearance: none; /* 隐藏默认样式 */appearance: none; /* 隐藏默认样式 */}#progress::-webkit-progress-bar {background-color: #f3f3f3; /* 背景颜色 */border-radius: 0; /* 移除背景圆角 */}#progress::-webkit-progress-value {background-color: #007bff; /* 进度颜色 */border-radius: 0; /* 移除进度圆角 */}#progress::-moz-progress-bar {background-color: #007bff; /* 进度颜色 (Firefox) */}</style>
</head>
<body><progress id="progress" max="100" value="0"></progress> <span id="progressText">0%</span><script>var progressElement = document.getElementById("progress");var progressTextElement = document.getElementById("progressText");var currentValue = 0;var intervalId;function updateProgress() {currentValue++;if (currentValue <= 100) {progressElement.value = currentValue;progressTextElement.textContent = currentValue + '%';} else {// clearInterval(intervalId); // 到100%，清除定时器currentValue = 0; // 重置为0，重新开始progressElement.value = currentValue;progressTextElement.textContent = currentValue + '%';}}// 设置定时器，每隔100毫秒执行一次updateProgress函数intervalId = setInterval(updateProgress, 100);</script></div>
</body>
</html>