js实现开关

使用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:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

添加JavaScript交互功能

为开关添加交互功能，可以在状态改变时触发相应操作：

document.querySelector('.switch input').addEventListener('change', function() {
  if(this.checked) {
    console.log('开关已打开');
    // 执行打开状态的操作
  } else {
    console.log('开关已关闭');
    // 执行关闭状态的操作
  }
});

使用第三方库实现高级开关

如果需要更复杂的功能，可以考虑使用第三方库如switchery：

安装：

npm install switchery

使用：

import Switchery from 'switchery';

const elem = document.querySelector('.js-switch');
const init = new Switchery(elem, {
  color: '#41b7f1',
  secondaryColor: '#f1f1f1',
  size: 'small'
});

响应式开关组件

创建一个响应式的开关组件，可以根据屏幕大小调整样式：

class ToggleSwitch {
  constructor(element) {
    this.element = element;
    this.init();
  }

  init() {
    this.element.addEventListener('click', this.toggle.bind(this));
    window.addEventListener('resize', this.adjustSize.bind(this));
  }

  toggle() {
    this.element.classList.toggle('active');
    const event = new CustomEvent('toggle', {
      detail: { isActive: this.element.classList.contains('active') }
    });
    this.element.dispatchEvent(event);
  }

  adjustSize() {
    const width = window.innerWidth;
    if(width < 768) {
      this.element.style.transform = 'scale(0.8)';
    } else {
      this.element.style.transform = 'scale(1)';
    }
  }
}

// 使用
const switchElement = document.querySelector('.custom-switch');
new ToggleSwitch(switchElement);

无障碍访问优化

确保开关对屏幕阅读器友好：

<label class="switch">
  <input type="checkbox" role="switch" aria-checked="false">
  <span class="slider"></span>
  <span class="sr-only">切换功能</span>
</label>

const switchInput = document.querySelector('.switch input');
switchInput.addEventListener('change', function() {
  this.setAttribute('aria-checked', this.checked);
});