Rumah > Artikel > hujung hadapan web > JavaScript实现进度条加载效果教程详解

JavaScript实现进度条加载效果教程详解

巴扎黑asal: 2017-08-18 10:53:441360semak imbas

这篇文章主要为大家详细介绍了如何简单实现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>
<p class="content" id="content">
<input type="button" id="button" value="暂停/增加" onclick="parse()">
<p class="box" id="box"></p>
<p class="percent" id="percent"></p>
</p>
<script>
// 获取id为box的元素
var box = document.getElementById("box");
//初始化y，此值只可以放在方法外部，若放到方法内部的话，那方法的每一次执行都是从宽度为0开始，从而使得进度条会一直停留在第一次执行方法的位置。
var y = 0;
//定义parse()方法
function parse(){
//获取进度条p的宽度
var x = box.style.width;
x = parseInt(x) + 1;
y = y+1;
//将y值加上百分号赋值给box的宽度。这样每次+1就可以实现进度条占父容器的100%;
box.style.width = y + "%";
//将y值加上百分号并赋值给显示下载百分比的p上
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>

Atas ialah kandungan terperinci JavaScript实现进度条加载效果教程详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Javascript中getter和setter基本介绍Artikel seterusnya：JSON.stringify()用法介绍

Artikel berkaitan

Lihat lagi