JavaScript实现简单动态进度条效果

更新时间：2018年04月06日 12:57:45 作者：冷月葬残花

这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现动态进度条效果的具体代码，供大家参考，具体内容如下

1.效果

2.源码

<html>
<head>
  <script type="text/javascript">
    window.onload = function () {
      var myProgress = document.getElementById("myProgress");
      var mySpan = document.getElementById("mySpan");
      var value = myProgress.value;
      mySpan.innerText = value + "%";
      var ID = setInterval(function () {
        value = myProgress.value;
        if (value < 100) {
          value += 10;
          myProgress.value = value;
          mySpan.innerText = value + "%";
        }
        if (value == 100) {
          clearInterval(ID);
        }
      }, 500);
    }
  </script>
</head>
<body>
<label for="myProgress">进度条</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
进度条

js DOM的事件常见操作实例详解
这篇文章主要介绍了js DOM的事件常见操作,结合实例形式详细分析了JavaScript DOM事件概念、原理及DOM操作常见实现技巧与使用注意事项,需要的朋友可以参考下
2019-12-12
JavaScript+html5 canvas实现图片破碎重组动画特效
这篇文章主要介绍了JavaScript+html5 canvas实现破碎重组的视频特效，感兴趣的小伙伴们可以参考一下
2016-02-02
bootstrap table列和表头对不齐的解决方法
这篇文章主要为大家详细介绍了bootstrap table列和表头对不齐的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
一个判断抢购时间是否到达的简单的js函数
这篇文章主要介绍了一个简单的判断抢购时间是否到达的js函数，原理很简单，找到时钟的id，计算数值，到达抢购时间时执行任务，需要的朋友可以参考下
2014-06-06
不错的Javascript表格翻页效果
不错的Javascript表格翻页效果...
2007-08-08
简单了解Ajax表单序列化的实现方法
这篇文章主要介绍了简单了解Ajax表单序列化的实现方法,随着Ajax的出现，表单序列化已经成为一种需求,在学习原生Ajax时,若用POST方法向后台提交数据时,就需要将表单序列化,需要的朋友可以参考下
2019-06-06
JS不完全国际化&本地化手册之理论篇
最近加入到新项目组负责前端技术预研和选型，其中涉及到一个熟悉又陌生的需求——国际化＆本地化。熟悉的是之前的项目也玩过，陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下，为后面的技术选型做准备
2016-09-09
图片完美缩放
图片完美缩放...
2006-09-09
javascript伸缩菜单栏实现代码分享
这篇文章主要介绍了javascript伸缩菜单栏实现代码，点击标题显示下级菜单，节约了空间，使页面排版更加紧凑，感兴趣的小伙伴们可以参考一下
2015-11-11
JavaScript键盘事件常见用法实例分析
这篇文章主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
2019-01-01