简单实现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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
Python代理抓取并验证使用多线程实现
2013/05/03 Python
django项目搭建与Session使用详解
2018/10/10 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python实现GIF图倒放
2020/07/16 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
土木工程专业自荐信
2013/10/04 职场文书
总监职责范文
2013/11/09 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
go xorm框架的使用
2021/05/22 Golang
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android