請使用純HTML製作一個進度條

王铁柱6發表於2024-11-28
HTML
<!DOCTYPE html>
<html>
<head>
<title>進度條</title>
<style>
#progress-container {
  width: 300px;
  height: 30px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden; /* 隱藏溢位的進度條 */
}

#progress-bar {
  height: 100%;
  background-color: #4CAF50; /* 進度條顏色 */
  width: 0%; /* 初始寬度為0 */
  border-radius: 5px;
  transition: width 0.5s ease-in-out; /* 新增過渡效果 */
}

#percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
</style>
</head>
<body>

<h1>進度條</h1>

<div id="progress-container">
  <div id="progress-bar">
    <div id="percentage">0%</div>
  </div>
</div>

<button onclick="updateProgress(25)">25%</button>
<button onclick="updateProgress(50)">50%</button>
<button onclick="updateProgress(75)">75%</button>
<button onclick="updateProgress(100)">100%</button>


<script>
function updateProgress(percentage) {
  var progressBar = document.getElementById("progress-bar");
  var percentageDisplay = document.getElementById("percentage");

  progressBar.style.width = percentage + "%";
  percentageDisplay.textContent = percentage + "%";
}
</script>

</body>
</html>

程式碼解釋:

  • HTML 結構:

    • #progress-container: 進度條的容器，設定了寬度、高度、背景顏色和圓角。 overflow: hidden; 確保進度條不會超出容器。
    • #progress-bar: 實際的進度條，初始寬度為 0，高度為 100%，背景顏色為綠色，也設定了圓角。 transition 屬性提供了平滑的動畫效果。
    • #percentage: 顯示百分比的文字，使用絕對定位和 transform 屬性使其居中。

  • CSS 樣式: 設定了進度條和容器的外觀。

  • JavaScript 功能:

    • updateProgress(percentage) 函式：接受一個百分比值作為引數，更新進度條的寬度和顯示的百分比文字。

如何使用:

  1. 將程式碼複製到一個 HTML 檔案中 (例如 progressbar.html)。
  2. 在瀏覽器中開啟該檔案。
  3. 點選按鈕，即可看到進度條的變化。

改進方向:

  • 動態更新: 可以結合 AJAX 或其他技術，根據實際的進度動態更新進度條，而不是手動設定百分比。
  • 自定義樣式: 可以修改 CSS 樣式來自定義進度條的外觀，例如顏色、高度、圓角等。
  • 動畫效果: 可以使用更復雜的 CSS 動畫或 JavaScript 動畫庫來建立更豐富的動畫效果。

這個例子提供了一個基本的 HTML 進度條實現，你可以根據自己的需求進行修改和擴充套件。

相關文章