js實現動態進度條

本文轉載自查看原文 2020-09-16 17:02 751 進度條/ html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js實現動態進度條</title>
</head>
<style>
#myProgress {
  width: 100%;
  height: 30px;
  position: relative;
  background-color: #ddd;
}

#myBar {
  background-color: #4CAF50;
  width: 10px;
  height: 30px;
  position: absolute;
}
</style>
<body>

<h1>JavaScript 進度條</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">點我</button> 

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 100);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }
}
</script>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現進度條 JS Loading 進度條實現思路 JS實現上傳進度條 JS進度條順滑版實現 Vue實現mp3音樂播放及動態進度條頁面加載進度條或加載動態圖實現 Qt實現炫酷啟動圖-動態進度條 Linux——進度條實現基於JQuery的進度條實現 python 實現各種進度條