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代码)
Apr 11 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
javascript中var的重要性分析
Feb 11 Javascript
javascript基础知识
Jun 07 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
基于复选框demo(分享)
Sep 27 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP XML数据解析代码
2010/05/26 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
18个非常棒的jQuery代码片段
2015/11/02 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python运算符重载用法实例
2015/05/28 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python日志模块logbook使用方法
2019/09/19 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
小学教师见习总结
2015/06/23 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js