简单实现js进度条加载效果
更新时间：2020年03月25日 11:52:58 作者：蒲小若
这篇文章主要为大家详细介绍了如何简单实现js进度条加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇类似于QQ的右滑删除效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
今天咱们就来聊聊KeyCode被弃用后的问题,希望对大家有所启发,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了javascript实现控制的多级下拉菜单，包含示例代码，效果非常不错，这里推荐给大家。2015-07-07
这篇文章主要介绍了浅谈es6中的元编程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
很多时候我们都需要防止重复提交,这方面的文章也比较多,实现的途径差别也很大.因为有些时候即使服务器能够识别重复的提交,也会造成问题.比如需要很长等待时间的操作,在首次提交后,不断重复提交,页面可能会死掉.用脚本来控制的话可以防止这种问题.2015-01-01
js遍历table的所有元素的代码，方便我们控制table的所有元素，颜色，样式等2008-07-07
JavaScript使用类似break机制中断forEach循环的方法
这篇文章主要介绍了JavaScript使用类似break机制中断forEach循环的方法,需要的朋友可以参考下2018-11-11
在网上经常看见一些抽奖页面,也玩过不同类型的抽奖活动,但是一直没有做过抽奖的功能,所以今天来实现一个简单的九宫格抽奖功能,文中有详细的代码示例供大家参考,感兴趣的朋友可以自己动手尝试一下2023-12-12
这篇文章主要为大家介绍了图片旋转、鼠标滚轮缩放、镜像、切换图片js代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
javascript实现 在光标处插入指定内容...2007-05-05
最新评论