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 相关文章推荐
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
手机号码,密码正则验证
Sep 04 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
React实现轮播效果
Aug 25 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
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
php 清除网页病毒的方法
2008/12/05 PHP
劣质的PHP代码简化
2010/02/08 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
《二泉映月》教学反思
2014/04/15 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
学习十八大演讲稿
2014/09/15 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
财务工作个人总结
2015/02/27 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
python ansible自动化运维工具执行流程
2021/06/24 Python