前端技术(22) : 进度条_前端进度条-优快云博客

来源: GPT

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* CSS代码 */
    .progress-container {
      width: 300px;
      height: 30px;
      background-color: #f2e6ff; /* 浅紫色 */
      position: relative;
      border-radius: 5px;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      background-color: #6a1b9a; /* 深紫色 */
      border-radius: 5px;
      transition: width 0.3s ease-in-out; /* 实现动态效果 */
      text-align: center;
      color: white;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar" id="progressBar">
      0%
    </div>
  </div>
  <br>
  <button onclick="updateProgress()">开始进度</button>

  <script>
    // JavaScript代码
    function updateProgress() {
      var progressBar = document.getElementById('progressBar');
      var width = 0;
      var id = setInterval(frame, 10); // 设置动态效果的时间间隔

      function frame() {
        if (width >= 100) {
          clearInterval(id);
        } else {
          width++;
          progressBar.style.width = width + '%';
          progressBar.innerHTML = width * 1 + '%'; // 显示进度数字
        }
      }
    }
  </script>
</body>
</html>