简单实现js进度条加载效果


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下载进度</title>
<style>
/*定义父容器*/
.content{
width: 500px;
height: 200px;
background: pink;
margin:0 auto;
}
/*定义进度条*/
.box{
width: 20px;
height: 30px;
line-height: 30px;
text-align: center;
background: #f00;
color: #fff;
}
/*定义下方显示的下载百分比*/
.percent{
width: 100%;
height: 30px;
line-height: 30px;
color: #00f;
text-align: center;
}
</style>
</head>
<body>
<div class="content" id="content">
<input type="button" id="button" value="暂停/增加" onclick="parse()">
<div class="box" id="box"></div>
<div class="percent" id="percent"></div>
</div>
<script>
// 获取id为box的元素
var box = document.getElementById("box");
//初始化y,此值只可以放在方法外部,若放到方法内部的话,那方法的每一次执行都是从宽度为0开始,从而使得进度条会一直停留在第一次执行方法的位置。
var y = 0;
//定义parse()方法
function parse(){
//获取进度条div的宽度
var x = box.style.width;
x = parseInt(x) + 1;
y = y+1;
//将y值加上百分号赋值给box的宽度。这样每次+1就可以实现进度条占父容器的100%;
box.style.width = y + "%";
//将y值加上百分号并赋值给显示下载百分比的div上
document.getElementById("percent").innerHTML = y + "%";
//判断当y已经100的时候,也就是进度条的宽度和父容器的宽度一致的时候停止。
if (y >= 100) {
clearInterval(id);
document.getElementById("percent").innerHTML = "100%";
document.getElementById("box").innerHTML = "下载完毕!";
}
}
//每10毫秒调用一下parse()方法.
var id = setInterval("parse()",10);
//当单机父容器时,进度条停止
document.getElementById("content").onclick = function(){
clearInterval(id);
} 


</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
JS实现一个简单的日历
Feb 22 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
你可能不知道的JSON.stringify()详解
Aug 17 #Javascript
vue组件Prop传递数据的实现示例
Aug 17 #Javascript
js实现随机点名小功能
Aug 17 #Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
You might like
php实现计数器方法小结
2015/01/05 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python 实现dict转json并保存文件
2019/12/05 Python
Pycharm调试程序技巧小结
2020/08/08 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
《散步》教学反思
2014/03/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
经济类毕业生求职信
2014/06/26 职场文书
大专生求职信
2014/06/29 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
优秀党员推荐材料
2014/12/18 职场文书
向女朋友道歉的话
2015/01/20 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python