js 原声制作进度条

最新推荐文章于 2023-09-27 09:27:03 发布

呵呵夏日的雪花

最新推荐文章于 2023-09-27 09:27:03 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/u010440155/article/details/51909135

版权

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>进度条</title>
<style type="text/css">
body{
text-align:center;
}
.graph{
width:40%;
border:1px solid rgba(128, 128, 128, 0.17);
height:12px;
margin:auto;
font-size: 16px;
}
#bar{
display:block;
background:rgba(128, 128, 128, 0.17);
float:left;
height:100%;
text-align:center;
}
#barNum{
position:absolute;
}
</style>
<script type="text/javascript">
function $(obj){ //封装方法，相当于jQuery
return document.getElementById(obj);
}
function go(){
$("bar").style.width = parseInt($("bar").style.width) + 1 + "%";
// $("bar").innerHTML = $("bar").style.width;
if($("bar").style.width == "100%"){
window.clearInterval(bar); //进度为100时清除定时器
window.location.href="";
}
}
var bar = window.setInterval("go()",20); //设置定时器
window.onload = function(){
var wheight=window.innerHeight;
$("content").style.marginTop=wheight/2-34;
bar;
}
</script>
</head>
<body>
<div id="content">
<div>系统正在认证合法性，请耐心等待</div>
<div class="graph">
<strong id="bar" style="width:1%;"></strong>
</div>
</div>

</body>
</html>