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实现进度条 CSS+JS 实现动态曲线进度条 js实现进度条代码 JS Loading 进度条实现思路 JS实现上传进度条 JS进度条顺滑版实现 js实现简单进度条 js 实现下载进度条 bootstrap得动态进度条