由于项目需要写一个开关按钮，找了bootstrap，以及amaze UI框架上面的switch开关按钮，更改样式太复杂了，
有很多问题，就干脆使用js写一个，
效果如下：
逻辑是点击二级圆点时背景色改变，圆点移动，而这2步只需要使用js来改变类控制；
代码如下
html:
<body>
<div id="div1" class="open1">
<div id="div2" class="open2"></div>
</div>
</body>
2个盒子嵌套
css:
<style>
#div1{
200px;
height: 90px;
border: 1px solid #808080;
border-radius: 44px;
position: relative;
}
#div2{
86px;
height: 86px;
border-radius: 50%;
position: absolute;
}
.open1{
background-color: white;
}
.open2{
left: 4px;
top: 2px;
}
.close1{
background-color: #a1ed2b;
}
.close2{
right: 4px;
top: 2px;
}
</style>
JS点击圆点时，利用三目运算添加类改变样式
<script>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div2.onclick=function(){
div1.className=(div1.className=="close1")?"open1":"close1";
div2.className=(div2.className=="close2")?"open2":"close2";
}
</script>