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 相关文章推荐
javascript string字符串优化问题
Jul 31 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php实现session共享的实例方法
2019/09/19 PHP
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
Python实现八大排序算法
2016/08/13 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python怎么判断模块安装完成
2020/06/19 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
2014年六一儿童节演讲稿
2014/05/23 职场文书
模特大赛策划方案
2014/05/28 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
五心教育心得体会
2014/09/04 职场文书
教师先进事迹材料
2014/12/16 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书