<html dir="rtl">
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#progressBarContainer
{
border-style: none;
border-width: 0px;
background-image: url('images/Progress_Bar_Bg.gif');
background-repeat: no-repeat;
background-position:center;
width:490px;
height:59px;
padding-left: 9px;
padding-top: 8px;
border-spacing: 0px;
direction:ltr;
text-align: left;
}
#ImgRec
{
border-color: inherit;
position:relative;
width:21px;
height:43px;
margin-right:4px;
}
</style>
<script type="text/javascript" language="javascript" src="Js/prototype-1.6.0.2.js"></script>
<script type="text/javascript" language="javascript" src="Js/ProgressBar.js"></script>
<script language="javascript" type="text/javascript">
//handle of the maxStep textbox
var maxStep;
function onload()
{
//handle of the maxStep textbox
maxStep = $("maxStep");
//get progressBar container div
var progressBarContainer = $("progressBarContainer");
//create new instance of progressBar class and pass the number of max step
progressBar = new ProgressBarClass(maxStep.value);
//set progressBar container div
progressBar.SetProgressBarContainer(progressBarContainer);
//set callback function to be notify when step changed
progressBar.OnStepChange = OnStepChange;
//set callback function to be notify when all steps finished
progressBar.OnFinish = OnFinish;
}
function OnStepChange(currentStep)
{
$("pages").innerHTML = currentStep + " pages printed";
}
function OnFinish()
{
$("pages").innerHTML = "Finish Printing";
}
function Auto()
{
progressBar.Auto ();
}
function Next()
{
progressBar.NextStep ();
}
function Stop()
{
progressBar.Stop ();
}
function Reset()
{
progressBar.Reset ();
$("pages").innerHTML = "0 pages printed";
}
function SetMaxStep()
{
progressBar.SetMaxStep(maxStep.value);
}
</script>
</head>
<body onload="onload()">
<table border="0" width="44%">
<tr>
<td><div id="progressBarContainer"></div></td>
</tr>
<tr>
<td align="center" height="30" dir="ltr"><div id="pages"></div></td>
</tr>
<tr>
<td>
<table border="0" width="100%">
<tr>
<td width="282">
<input type="button" value="SetMaxStep" name="B3" onclick="SetMaxStep()" style="width: 140; height: 30"></td>
<td align="center"> </td>
<td width="46" align="center">
<input type="button" value="Stop" name="B6" onclick="Stop()" style="width: 63; height: 30"></td>
<td width="42" align="center">
<input type="button" value="Auto" name="B4" onclick="Auto()" style="width: 63; height: 30"></td>
</tr>
<tr>
<td width="282">
<input type="text" name="maxStep" size="18" value="10"></td>
<td align="center"> </td>
<td width="46" align="center">
<input type="button" value="Reset" name="B7" onclick="Reset()" style="width: 63; height: 30"></td>
<td width="42" align="center">
<input type="button" value="Next" name="B5" onclick="Next()" style="width: 63; height: 30"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
一个基于纯js的进度条Javascript Progress Bar代码
1星 需积分: 9 135 浏览量
2008-10-19
20:24:15
上传
评论
收藏 37KB ZIP 举报 
Javascript Progress Bar.zip （9个子文件） 
ProgressBar _vti_cnf 
ProgressBar.htm 997B ProgressBar.htm 3KB Js prototype-1.6.0.2.js 123KB ProgressBar.js 4KB _vti_cnf prototype-1.6.0.2.js 174B ProgressBar.js 424B images 
Progress_Bar_Fill.gif 799B _vti_cnf Progress_Bar_Bg.gif 174B Progress_Bar_Bg.gif 3KB
评论1