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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • JavaScript中this详解

    JavaScript中this详解

    都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言。它把函数式编程和面向对象编程糅合一起,再加上动态语言特性,简直强大无比,下面小编给大家介绍Javascript中this详解,需要的小伙伴可以来参考下
    2015-09-09
  • javascript import css实例代码

    javascript import css实例代码

    差点被FF下的insertRule给带晕了. sheet.insertRule("@import url('aa.css');",sheet.cssRules.length);
    2008-07-07
  • JS构造函数与原型prototype的区别介绍

    JS构造函数与原型prototype的区别介绍

    下面小编就为大家带来一篇JS构造函数与原型prototype的区别介绍。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Three.js中网格对象MESH的属性与方法详解

    Three.js中网格对象MESH的属性与方法详解

    三维开发渲染最多的对象大概是网格mesh了,Webgl开发三维也不例外,下面这篇文章主要给大家介绍了关于Three.js中网格对象MESH的属性与方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • 每个 JavaScript 工程师都应懂的33个概念

    每个 JavaScript 工程师都应懂的33个概念

    这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习( JavaScript )中,可以作为一篇指南,需要的朋友可以参考下
    2018-10-10
  • avalon js实现仿微博拖动图片排序

    avalon js实现仿微博拖动图片排序

    玩微博的朋友都上传过图像吧,当图片上传后用户是可以随意拖动图片的,调整图片的顺序,那么此功能是怎么实现的,下面小编通过此篇文章给大家详解基于avalon js实现仿微博拖动图片排序,需要的朋友可以参考下
    2015-08-08
  • javascript的this关键字详解

    javascript的this关键字详解

    这篇文章主要介绍了javascript的this关键字的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JS实现判断碰撞的方法

    JS实现判断碰撞的方法

    这篇文章主要介绍了JS实现判断碰撞的方法,实例分析了通过js判断实体碰撞的技巧与相关应用,需要的朋友可以参考下
    2015-02-02
  • javascript强制点击的方法

    javascript强制点击的方法

    这篇文章主要介绍了javascript强制点击的方法,可用于下载站或文档显示站,实现点击后才能出现相应显示的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】

    这篇文章主要介绍了JS实现经典的中国地区三级联动下拉菜单功能,结合完整实例形式分析了javascript基于事件响应实现页面元素动态变换的相关操作技巧,需要的朋友可以参考下
    2017-06-06

最新评论