<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <title>Simple exercise</title> <style>Div{width:50px;Height:50px;background:#CC66CC;Margin-bottom:20px;position:relative; } </style></Head><Body> <!--Two Div uses a motion function, one moves to the right 350px, one moves to the right 590px, each move 3px - <inputtype= "button"value= "Start Motion"> <DivID= "Div1"></Div> <DivID= "Div2"></Div> <Script>window.onload= function(){ varbtn=Document.queryselector ("input"); varDiv1=Document.queryselector ("#div1"); varDiv2=Document.queryselector ("#div2"); vartimer; functionMove (Obj,attr,target) {clearinterval (Obj.timer); Obj.timer=SetInterval (function(){ varVal=parseint (getComputedStyle (obj) [attr]); Val+=3; if(Val>=target) {clearinterval (Obj.timer); Val=Target; } Obj.style[attr]=Val+"px"; }, -); } Btn.onclick= function() {Move (DIV1," Left", -); Move (Div2," Left",590); } } </Script></Body></HTML>
1. When using the timer, it is necessary to clear the other timers according to the situation, to avoid multiple clicks of the property value changes faster.
2. Revise the value of the last movement stop, and note the relationship between the moving target value and the change value (target, Val in the code).
Write a simple motion template
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
