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 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
JS闭包经典实例详解
Dec 20 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
Js类的构建与继承案例详解
Sep 15 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python删除字符串中指定字符的方法
2018/08/13 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
工厂仓管员岗位职责
2014/01/01 职场文书
我的画教学反思
2014/04/28 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年环卫工作总结
2014/11/22 职场文书
公务员个人考察材料
2014/12/23 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang