Classic case about - js control ball movement
<meta cahrset="utf-8" & gt;
Rolling ball & lt;/title> <br/><style type="text/CSS" & gt; <br/>* {<br/>Margin: 0 px; <br/>Padding: 0 px; <br/>} <br/># BTN {<br/>Position: absolute; <br/>Top: 200 px; <br/>Left: 20 px; <br/>} <br/># smallBall {<br/>Width: 100 px; <br/>Height: 100 px; <br/>The line - height: 100 px; <br/>The text - align: center; <br/>/* border: 1 px solid black */<br/>Border - the radius: 100%; <br/>Background - color: # ff0000; <br/>Position: absolute; <br/>Top: 50 px; <br/>Left: 0 px; <br/>} <br/></style> <br/></head> <br/><body> <br/><Div id="smallBall" & gt; Ball & lt;/div> <br/><The button id="BTN" & gt; Rolling ball & lt;/button> <br/><The script type="text/javascript" & gt; <br/>Var BTN=document. GetElementById (" BTN "); <br/>Var smallBall=document. GetElementById (" smallBall "); <br/>Var speed=10; <br/>Var x=true; <br/>BTN. Onclick=function () {<br/>Var time=setInterval (run, 30); <br/>The function the run () {<br/>If (smallBall. OffsetLeft=="0") {<br/>X=true; <br/>} else if (smallBall. OffsetLeft=="600") {<br/>X=false; <br/>} <br/>If (x==true) {<br/>SmallBall. Style. Left=smallBall. OffsetLeft + speed + "px"; <br/>} else {<br/>SmallBall. Style. Left=smallBall. OffsetLeft -speed + "px"; <br/>} <br/>} <br/>} <br/></script> <br/></body> <br/></html> </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/94033.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/94033.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/94032.html'>Vue project configuration of local, testing, production environment, configuration axios. Defaults.</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/94034.html'>Drag and drop after scaling problems</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html> 