jquery进度条

最新推荐文章于 2021-06-16 23:35:04 发布

穷开心0902

最新推荐文章于 2021-06-16 23:35:04 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/jincenlong58/article/details/8843996

版权

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>进度条测试</title>
<style>
#center{
margin:50px auto;
width:400px;
}
#loading{
width:397px;
height:49px;
background:url(bak.png) no-repeat;
}
#loading div{
width:0px;
height:48px;
background:url(pro.png) no-repeat;
color:#fff;
text-align:center;
font-family:Tahoma;
font-size:18px;
line-height:48px;
}
#message{
width:200px;
height:35px;
font-family:Tahoma;
font-size:12px;
background-color:#d8e7f0;
border:1px solid #187CBE;
display:none;
line-height:35px;
text-align:center;
margin-bottom:10px;
margin-left:50px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var progress_id = "loading";
function SetProgress(progress){
if (progress) {
$("#" + progress_id + " > div").css("width", String(progress) + "%"); //控制#loading div宽度
$("#" + progress_id + " > div").html(String(progress) + "%"); //显示百分比
}
}
var i = 0;
function doProgress() {
if (i <= 100) {
setTimeout("doProgress()", 100);
SetProgress(i);
i++;
}
}

$(document).ready(function() {
doProgress();
});
</script>
</head>

<body>

<div id="center">
<div id="message"></div>
<div id="loading"><div></div></div>
</div>

</body>
</html>

穷开心0902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery进度条

进度条测试 #center{ margin:50px auto; width:400px; } #loading{ width:397px; height:49px; background:url(bak.png) no-repeat; } #loading div{ width:0px; height:48px; background:
复制链接

扫一扫