中企动力做网站要全款深圳百度搜索排名优化

知识点

• CSS实现switch滑动开关按钮
• JS声明数组
• 原生JS操作DOM常用方法

介绍

有三个开关按钮，最多只能打开两个开关，如果打开三个，则默认关闭最后打开开关的前一个。

代码

HTML:

<h3>How do you want your project to be?</h3>
<div class="switch_box"><label for="">Good</label><button class="switch"><span class="switch_circle circle_left"></span></button>
</div>
<div class="switch_box"><label for="">Cheap</label><button class="switch"><span class="switch_circle circle_left"></span></button>
</div>
<div class="switch_box"><label for="">Fast</label><button class="switch"><span class="switch_circle circle_left"></span></button>
</div>

CSS：

 h3{text-align: center;}.switch_box{margin: 10px;text-align: center;}label{display: inline-block;width: 55px;}.switch{position: relative;box-sizing: content-box;width: 70px;height: 35px;padding: 0;border-radius: 40px;border:3px solid transparent;}.switch_active{background-color: #0052d9;}.switch_circle{position: absolute;top: 0;width: 35px;height: 35px;background-color:#fff;border-radius: 50%;transition: .5s;}.circle_left{left: 0;}.circle_right{left: 35px;}

JavaScript:

 const switchs = document.getElementsByClassName("switch")const circles = document.getElementsByClassName("switch_circle")let switchStatus = new Array(switchs.length)Array.from(switchs).forEach((ele,idx) => {let circle = ele.getElementsByClassName("switch_circle")[0]ele.addEventListener("click",()=>{let count = 0changeSwitch(ele,circle)  if(ele.classList.contains("switch_active")){switchStatus[idx] = truefor(let i =0;i<switchStatus.length;i++){if(switchStatus[i]==true){count++}}// 如果全打开了，则默认关闭最后打开的前一个if(count == switchStatus.length){let disIdx = idx>=1 ? idx-1:switchs.length-1changeSwitch(switchs[disIdx],circles[disIdx])  switchStatus[disIdx] = false}}else{switchStatus[idx] = false}})  })// 更改开关状态function changeSwitch(switchh,circle){switchh.classList.toggle("switch_active")circle.classList.toggle("circle_left")circle.classList.toggle("circle_right") }