播放进度条

最新推荐文章于 2024-10-15 09:57:04 发布

iteye_19861

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量159

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19861/article/details/82033114

版权


<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)"> 
							<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>