如何去写小米手机系统中的按钮

Posted 2020-10-09 大家都叫我会长

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何去写小米手机系统中的按钮相关的知识，希望对你有一定的参考价值。

首先贴出两张图：

今天分享的就是小米手机系统中按钮案例，本人是初学者，所以有些代码写的并不十分的准确，兼容性方面也没有调试，重在记录和分享思路，请各路大神多多指点[抱拳]

<body>
    <div id="container">
        <div id="btn"></div>
    </div>
</body>

CSS部分：

#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部分：

window.onload=function(){
                var oDiv=document.getElementById("container");
                var oBtn=document.getElementById("btn");
                oDiv.onclick=function(){
                    var oBtnMarginLeft=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";
                        });
                    }
                }
            }
            function startMove(obj,attr,iTarget,fn){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var iCur=parseInt(getStyle(obj,attr));
                    var iSpeed=(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);
            }
            function getStyle(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj,false)[attr];
                }
            }

思路讲解：

　　1、布局其实就非常简单了，我采用的是两个div嵌套，一个是按钮外部的容器，一个是内部运动的物体

　　2、在这里需要强调的是，初学者可能会遇到的一个问题，就是当一个物体需要运动的时候，要给元素添加定位，而在本案例中，我是让内嵌元素的margin值在变动，所以不需要给元素进行定位。

　　3、另外在js中，自己写了一个简单的运动框架，是一个缓冲运动，让按钮在使用的过程中更加的友好。

如果各位网友有什么好的建议以及更好的解决方案，欢迎留言提建议。

以上是关于如何去写小米手机系统中的按钮的主要内容，如果未能解决你的问题，请参考以下文章

小米手机root权限怎么开启小米手机root权限如何开启