编程 Javascript

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

Posted in Javascript onApril 06, 2018

本文实例为大家分享了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>

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

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

- Author -

冷月葬残花

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

Aug 22 Javascript

Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready

Nov 24 Javascript

详解JS面向对象编程

Jan 24 Javascript

vue-resource 拦截器使用详解

Feb 21 Javascript

layui radio性别单选框赋值方法

Aug 15 Javascript

浅谈redux以及react-redux简单实现

Aug 28 Javascript

浅谈Angular7 项目开发总结

Dec 19 Javascript

JavaScript跳出循环的三种方法(break, return, continue)

Jul 30 Javascript

vue路由教程之静态路由

Sep 03 Javascript

Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

May 18 Javascript

Javascript实现鼠标移入方向感知

Jun 24 Javascript

vue 解决IOS10低版本白屏的问题

Nov 17 Javascript

js+css实现打字效果

Jun 24 #Javascript

简单介绍react redux的中间件的使用

Apr 06 #Javascript

webpack源码之loader机制详解

Apr 06 #Javascript

vue.js项目nginx部署教程

Apr 05 #Javascript

常用的 JS 排序算法整理版

Apr 05 #Javascript

通过 JS 判断页面是否有滚动条的实现方法

Apr 05 #Javascript

mint-ui在vue中的使用示例

Apr 05 #Javascript