js实现简单进度条效果


Posted in Javascript onMarch 25, 2020

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

实现进度条需要三个部分:

1、外部的大容器
2、在增长的进度条
3、显示进度条可视化的百分数

运用js控制进度条的width便可实现;

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div{
 width: 500px;
 height: 50px;
 position: relative;
 border: 2px solid;
 margin: 0 auto;
 }
 aside{
 height: 50px;
 background:red;
 }
 p{
 position: absolute;
 top: 0;
 right: 0;
 }
 </style>
 <script type="text/javascript">
 var i = 0;
 var timer = setInterval(function(){
 document.getElementById("aside").style.width = i++ + 'px';
 document.getElementById("span").innerHTML = parseInt(i*100/500);
 if(i > 500){
 clearInterval(timer);}
 },10)
 </script>
</head>
<body>
 <div>
 <aside id="aside" style="width: 10px;"></aside>
 <p><span id="span">0</span>%</p>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
JavaScript实现简单进度条效果
Mar 25 #Javascript
JavaScript实现随机点名程序
Mar 25 #Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
JS实现网页时钟特效
Mar 25 #Javascript
js实现小时钟效果
Mar 25 #Javascript
vue页面更新patch的实现示例
Mar 25 #Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 #Javascript
You might like
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
js密码强度检测
2016/01/07 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python全局变量操作详解
2015/04/14 Python
python对象及面向对象技术详解
2016/07/19 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
使用Python写一个小游戏
2018/04/02 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
525心理活动总结
2014/07/04 职场文书
高中班主任评语
2014/12/30 职场文书
董事长新年致辞
2015/07/29 职场文书