This is a sample Html page that displays text box. When user enters value in that text box and clicks on the available button, progress bar displays the status
<html>
<head>
<script>
var tmr;
var mxloop=10;
var curvl=0;
function test()
{
curvl=curvl+1;
var window_width=Math.round(((curvl/mxloop)*100),2);
if(curvl>mxloop)
{
window.clearTimeout(tmr);
curvl=0;
return;
}
displayProgress(window_width)
tmr=window.setTimeout("test();", parseInt(document.getElementById('txtval').value));
}
function displayProgress(percent)
{
document.getElementById('prgs').innerHTML='<DIV ID="percent" STYLE="filter: alpha (opacity=30);text-align:center;position: absolute;width:' + percent+ '%;vertical-align: middle;background-color:green;"></div><center>'+percent+'%</center>';
}
</script>
</head>
<body>
<input type="text" id="txtval"/>
<input type="button" id="btn" onclick="test();" value="start"/>
<br/>
<div id="prgs" style="border:2px solid black;width:10%;fore-color:black;">
</div>
</body>
</html>
No comments:
Post a Comment