js创建动态加载进度条的方法-创新互联

这篇文章主要介绍了js创建动态加载进度条的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

进度条可以用来描述正在执行的任何任务的进度，它通常会被用于显示下载和上传时的状态。换句话说，进度条可以用来描述正在进行的任何事情的状态。

下面我们就来看看使用JavaScript如何实现动态加载的进度条？我们需要执行以下步骤：

1、为进度条创建HTML结构：

下面的代码中包含两个名为“Progress_Status”和“myprogressbar”的“div”标签元素。

2、添加CSS：

下面的代码用于设置进度条的宽度和背景颜色以及条形图中的进度状态。

#Progress_Status { 
 width: 50%; 
  background-color: #ddd; 
} 
  
#myprogressBar { 
 width: 1%; 
  height: 35px; 
  background-color: #4CAF50; 
  text-align: center; 
  line-height: 32px; 
  color: black; 
}

3、添加JavaScript：

下面的代码使用javascript函数“update”和“scene”创建一个动态progess bar（动画）。

function update() { 
  var element = document.getElementById("myprogressBar");    
  var width = 1; 
  var identity = setInterval(scene, 10); 
  function scene() { 
    if (width >= 100) { 
      clearInterval(identity); 
    } else { 
     width++;  
      element.style.width = width + '%';  
    } 
  } 
}

运行：

这样的加载样式有点单调，我们还可以添加数字标签以指示用户在流程中的位置；这需要在进度条内部或外部添加新元素，显示进度状态。

4、添加数字加载样式

我们可以在JavaScript的else {}语句里在添加一条语句：

element.innerHTML = width * 1  + '%';

就可以实现数字加载显示进度状态的样式，运行效果：

感谢你能够认真阅读完这篇文章，希望小编分享js创建动态加载进度条的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。