简单实现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实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
js实现AI五子棋人机大战
May 28 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
vue模块移动组件的实现示例
May 20 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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/07/17 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
Javascript倒计时代码
2010/08/12 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
鼓励运动员的广播稿
2014/02/08 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
会议主持词
2014/03/17 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js