js实现简单进度条效果的方法（代码实例）

来源：动视网责编：小采时间：2020-11-27 19:29:33

js实现简单进度条效果的方法（代码实例）

js实现简单进度条效果的方法（代码实例）:本篇文章给大家带来的内容是介绍js实现简单进度条效果的方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。不多说，直接上代码<!DOCTYPE html> <html> <head> <meta charset=

推荐度：

点击下载本文 文档为doc格式

导读js实现简单进度条效果的方法（代码实例）:本篇文章给大家带来的内容是介绍js实现简单进度条效果的方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。不多说，直接上代码<!DOCTYPE html> <html> <head> <meta charset=

本篇文章给大家带来的内容是介绍js实现简单进度条效果的方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

不多说，直接上代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>ProgressBar</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #progress{
 width: 100%;
 height: 30px;
 background: rgb(42, 138, 248);
 }
 #bar{
 width: 1%;
 height: 28px;
 margin-top: 1px;
 background: purple;
 }

 </style>
 
</head>
 <body>
 <div id="progress">
 <div id="bar"></div>
 </div>
 <div><h3 id="text-progress">0%</h3></div>
 <input type="button" id=“btn” value="点击开始" onclick="action()">
 </body>
 <script>
 function action(){
 var iSpeed=1;
 obj=setInterval(function(){
 iSpeed+=1;
 if(iSpeed>=100){ // 设置达到多少进度后停止
 clearInterval(obj); 
 }
 bar.style.width=iSpeed+'%';
 document.getElementById('text-progress').innerHTML=iSpeed+'%';

 },100); // 1s后函数执行一次
 }
 </script>
</html>

结果