How to write a button in Xiaomi phone system

First put out two pictures:

Today's share is Xiaomi mobile phone system button case, I am a beginner, so some code is not very accurate writing, compatibility is not debugging, heavy in the record and share ideas, please all the way the big god lot of guidance [embrace]

HTML section:

< Body >    <  ID= "container">        <id= "BTN"  ></div>    </div> </ Body >

CSS section:

#container {    position:relative;    left:200px;    top:100px;    border:1px solid #c2c2c2;    width:66px;    height:26px;    border-radius:50px 50px 50px 50px;    padding:4px;} #btn         {            width:26px;            height:26px;            border-radius:26px;            Background: #ededed;    margin-left:0px;        }        

JS section:

Window.onload=function(){                varOdiv=document.getelementbyid ("Container"); varObtn=document.getelementbyid ("BTN"); Odiv.onclick=function(){                    varObtnmarginleft=parseint (GetStyle (obtn, "MarginLeft")); Console.log ("Obtnmarginleft=" +obtnmarginleft); if(obtnmarginleft>0) {startmove (obtn,"MarginLeft", 0,function() {OBtn.style.backgroundColor= "#ededed";                    }); }Else{startmove (obtn,"MarginLeft", 38,function() {OBtn.style.backgroundColor= "#33b4ff";                    }); }                }            }            functionStartmove (OBJ,ATTR,ITARGET,FN) {clearinterval (Obj.timer); Obj.timer=setinterval (function(){                    varIcur=parseint (GetStyle (obj,attr)); varIspeed= (itarget-icur)/3; Ispeed=ispeed>0?Math.ceil (ispeed): Math.floor (Ispeed); Document.title=icur; if(icur==itarget) {clearinterval (obj.timer);//Console.log (GetStyle (obj, "left");                        if(FN) FN (); }Else{icur+=Ispeed; OBJ.STYLE[ATTR]=icur+ "px"; }                },30); }            functionGetStyle (obj,attr) {if(obj.currentstyle) {returnObj.currentstyle[attr]; }Else{                    returngetComputedStyle (obj,false) [attr]; }            }

Explanation of ideas:

1, the layout is actually very simple, I use two div nesting, one is the button outside the container, one is the internal movement of the object

2, here need to emphasize is that the beginner may encounter a problem, that is, when an object needs to move, to add positioning elements, and in this case, I let the margin value of the embedded element in the change, so do not need to locate the element.

3, in addition to JS, I wrote a simple motion frame, is a buffer movement, let the button in the process of use more friendly.

If you have any good suggestions and better solutions, please leave a message to suggest.

How to write a button in Xiaomi phone system