简单实现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学习笔记 nt-child的使用
Jan 17 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
validform表单验证的实现方法
Mar 08 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
你可能不知道的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修正代码
2011/05/09 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
小学美术教学反思
2014/02/01 职场文书
思想道德自我评价2015
2015/03/09 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android