js 实现开关
使用HTML和CSS创建开关样式
创建一个基本的开关样式需要HTML和CSS的配合。HTML提供结构，CSS负责视觉效果。
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}添加JavaScript交互功能
通过JavaScript监听开关状态变化并执行相应操作。
const toggleSwitch = document.querySelector('.switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
console.log('开关开启');
// 开启状态下的操作
} else {
console.log('开关关闭');
// 关闭状态下的操作
}
}
toggleSwitch.addEventListener('change', switchTheme, false);使用第三方库实现高级开关
对于更复杂的需求，可以考虑使用第三方库如switchery。
安装switchery：
npm install switchery使用示例：
import Switchery from 'switchery';
const elem = document.querySelector('.js-switch');
const init = new Switchery(elem, {
color: '#41b7f1',
secondaryColor: '#dedede',
size: 'small'
});响应式开关实现
确保开关在不同设备上都能良好显示，可以添加响应式设计。
@media screen and (max-width: 600px) {
.switch {
width: 50px;
height: 28px;
}
.slider:before {
height: 20px;
width: 20px;
}
input:checked + .slider:before {
transform: translateX(22px);
}
}无障碍访问优化
为开关添加适当的ARIA属性，提升无障碍访问体验。
<label class="switch">
<input type="checkbox" role="switch" aria-checked="false">
<span class="slider round"></span>
</label>const switchInput = document.querySelector('.switch input');
switchInput.addEventListener('change', function() {
this.setAttribute('aria-checked', this.checked);
});
