前端小项目9 # Good,Cheap,Fast 控制滑动开关打开数量

知识点

• 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 = 0
         changeSwitch(ele,circle)  
         if(ele.classList.contains("switch_active")){
    
    
             switchStatus[idx] = true
             for(let i =0;i<switchStatus.length;i++){
    
    
                 if(switchStatus[i]==true){
    
    
                     count++
                 }
             }
             // 如果全打开了，则默认关闭最后打开的前一个
             if(count == switchStatus.length){
    
    
                 let disIdx = idx>=1 ? idx-1:switchs.length-1
                 changeSwitch(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") 
 }