Tip: you can modify some code before running
<!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>Untitled Document</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>
Tip: you can modify some code before running
