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


Posted in Javascript onApril 06, 2018

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

1.效果

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

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 相关文章推荐
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
jquery默认校验规则整理
Mar 24 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
关于layui时间回显问题的解决方法
Sep 24 Javascript
用javascript制作qq注册动态页面
Apr 14 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
You might like
php表单转换textarea换行符的方法
2010/09/10 PHP
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
Symfony查询方法实例小结
2017/06/28 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python实现人像动漫化的示例代码
2020/05/17 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Linux操作面试题
2012/05/16 面试题
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
党员承诺书范文
2014/05/19 职场文书
单位租房协议书范本
2014/12/04 职场文书
体育活动总结
2015/02/04 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL