提示：您可以先修改部分代碼再運行
<!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 type="text/css">* { margin:0; padding:0; -moz-user-select:-moz-none;}.line { position:relative; width:500px; height:10px; background:#999; margin:150px auto;}#div { width:30px; height:30px; background:#555; position:absolute; left:0px; top:-10px; z-index:10;}#div2 { width:30px; height:20px; text-align:center; position:absolute; left:0px; top:-30px;}#div3 { height:10px; background:#000; position:absolute; left:0px; top:0px;}</style></head><body><div class="line"><div id="div"></div><div id="div2">0</div><div id="div3"></div></div><script type="text/javascript">var oDiv=document.getElementById('div');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');var oldDiv={x:0}var oldMouse={x:0}oDiv.onmousedown=down;oDiv3.style.width=oDiv.offsetLeft+"px";function down(e){r=Math.floor(Math.random()*256)g=Math.floor(Math.random()*256)b=Math.floor(Math.random()*256)if(oDiv.offsetLeft>=0&&oDiv.offsetLeft<=470){var e=e||event;oDiv.style.cursor='move';oldDiv.x=oDiv.offsetLeft;oldMouse.x=e.clientX;if(oDiv.setCapture){oDiv.setCapture();}oDiv.onmousemove=move;oDiv.onmouseup=up;}}function move(e){if(oDiv.offsetLeft>=0&&oDiv.offsetLeft<=470){var e=e||event;if(oDiv.offsetLeft>450){oDiv.style.background='#000'oDiv2.style.color='red'}else if(oDiv.offsetLeft<450){oDiv.style.background='#555'oDiv2.style.color='#000'}oDiv2.style.color=oDiv.style.background='RGB('+r+','+g+','+b+')'oDiv.style.left=oldDiv.x+(e.clientX-oldMouse.x)+'px';oDiv2.innerHTML=oDiv.offsetLeft;oDiv2.style.left=oDiv.offsetLeft+'px';oDiv3.style.width=oDiv.offsetLeft+'px';}if(oDiv.offsetLeft<0){oDiv.style.left=oDiv2.style.left=oDiv3.style.width='0px'oDiv2.innerHTML='0'}if(oDiv.offsetLeft>470){oDiv.style.left=oDiv2.style.left=oDiv3.style.width='470px'oDiv2.innerHTML='STOP'}}function up(){if(oDiv.setCapture){ oDiv.releaseCapture();}oDiv.style.cursor='default';oDiv.onmousemove=null;oDiv.onmouseup=null;}</script></body> </td> </tr></table>
提示：您可以先修改部分代碼再運行
