争怎路由网/网站教程/内容

js如何创建动态加载的进度条？（代码示例）

网站教程2024-05-05 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是介绍js如何创建动态加载的进度条？（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

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

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

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

<div id="Progress_Status"> 
  <div id="myprogressBar"></div> 
</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 + '%';  
    } 
  } 
}
运行：
1.gif
这样的加载样式有点单调，我们还可以添加数字标签以指示用户在流程中的位置；这需要在进度条内部或外部添加新元素，显示进度状态。
4、添加数字加载样式
我们可以在JavaScript的else {}语句里在添加一条语句：
element.innerHTML = width * 1  + '%';
就可以实现数字加载显示进度状态的样式，运行效果：
2.gif
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。想要获得更多相关视频教程，可访问：JavaScript教程！
以上就是js如何创建动态加载的进度条？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:js如何创建动态加载的进度条？（代码示例）
 
相关阅读