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

news2025/6/10 0:10:37

文章目录

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>