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数据缓存系统实现代码
Oct 24 Javascript
JS中表单的使用小结
Jan 11 Javascript
javascript打开word文档的方法
Apr 16 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
80行代码写一个Webpack插件并发布到npm
May 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
xml+php动态载入与分页
2006/10/09 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
js单例模式的两种方案
2013/10/22 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
老生常谈JavaScript数组的用法
2016/06/10 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python正规则表达式学习指南
2016/08/02 Python
用python实现百度翻译的示例代码
2018/03/09 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
简单的Python人脸识别系统
2020/07/14 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
服装机修工岗位职责
2013/12/26 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
亲子拓展活动方案
2014/02/20 职场文书
小学生评语集锦
2014/04/18 职场文书
学校教研活动总结
2014/07/02 职场文书
小学庆六一主持词
2015/06/30 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android