播放进度条

<html>
	<head>
		<title>播放器 By Roger Li</title>
		<script language="javascript">
	
	function goto(t)
	{
		t.setCapture();
		var ox=event.clientX;

		foreDiv.style.width = ox-138;
			
		t.releaseCapture();
	}
	
	function updatetime()
	{
		// 一秒钟的长度 
		var unit = 500/30;
		var currentPosition = parseInt(foreDiv.style.width);
		if (currentPosition < 500)
		{
				if (currentPosition + unit > 500)
				{
						foreDiv.style.width = 500;
						point.style.left = 485;
				}
				else
				{	
					foreDiv.style.width = currentPosition + unit;
					point.style.left = currentPosition  + unit - 15;
				}
				setTimeout("updatetime()",1000);
		}
		else
		{
				foreDiv.style.width = 0;
				point.style.left = 0;
		}	
	}
	 
	</script>



	</head>
	<body onload="updatetime();">							
			<div style="HEIGHT:16px; position:absolute; left:136px; bottom:13px; width:500px; z-index:1; border:1px solid blue;">
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="100%" align=left valign="baseline" style="cursor:hand" onmouseout="noshowtime()" onmousemove="showtime(this)" onclick="goto(this)">&nbsp;
							<div id="foreDiv" style="background-color:lightblue;HEIGHT:16px; position:absolute; left:0px; top:0px; width:1px; z-index:1;">
							</div>
							<div id="point" style="background-color:green;HEIGHT:16px; position:absolute; left:0px; top:0px; width:15px; z-index:1;">
							</div>
						</td>
					</tr>
				</table>
			</div>	
	</body>
</html>

你可能感兴趣的:(进度条)