首页 > 代码库 > js控制进度条到达100%跳转界面一
js控制进度条到达100%跳转界面一
进度条一般在手机上用到的比较广泛，刚好最近的项目也是一直在做手机站，这个特效是手机端的一个界面，现在我把改成pc端了，进度条的快慢速度和样式可自行调节，改动也是很方便的，不多说，看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js控制进度条到达100%跳转界面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
font-family: arial, "microsoft yahei";
font-size: 14px;
background: #c2d7ac;
}
.progress {
width: 300px;
height: 30px;
margin: auto;;
background: #70b4e5;
border-radius: 5px;
-webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
}
.progress_bar {
width: 0%;
height: 26px;
background: url("images/bar.jpg") repeat;
background-size: auto 100%;
border-radius: 5px;
position: relative;
left: 3px;
right: 3px;
top: 2px;
}
p {
width: 300px;
text-align: center;
font-size: 14px;
color: #c20606;
position: absolute;
top: 98px;
}
</style>
<body onl oad="fakeProgress(0, load)">
<div style="height: 120px;"></div>
<div class="progress">
<div id=load>
<div class="progress_bar"></div>
<p>0</p>
</div>
</div>
<script type="text/javascript">
function setLOAD(v, el) {
var read = (document.all && document.getElementsByTagName);
if (read || document.readyState == "complete")
valueEl = el.children[1];
{
filterEl = el.children[0];
valueEl.innerText = v + "%";
filterEl.style.width = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "http://www.mamicode.com/begin.html";
else {
setLOAD(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all[‘" + el.id + "‘])", 2000);
}
}
</script>
</body>
</html>
效果：
js控制进度条到达100%跳转界面一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。