利用前端基础制作html开关图标

前言

在前端页面中，经常会使用到开关类型的交互元素，比如说音量开关、夜间模式开关等等。在本文中，将介绍如何利用前端基础知识来制作一个简单的html开关图标，并实现点击开关状态的切换效果。

准备工作

HTML结构

首先，我们需要创建一个HTML结构来容纳我们的开关图标。对于一个简单的开关，我们只需要使用一个标签来实现：

<label class="switch">

  <input type="checkbox">
  <span class="slider round"></span>
</label>

其中，<input type="checkbox">标签是用来记录开关状态的，而<span class="slider round">则是我们开关的滑块部分。CSS样式将在后面进行讲解。

CSS样式

接下来，我们为开关元素添加CSS样式。我们需要对<label>及其子元素进行定位、布局均采用CSS的绝对定位（position:absolute），并通过CSS设置其尺寸，背景色，边框等特性。

下面是一个基本的样式：

/* 开关整体样式 */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* 开关滑块样式 */
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}
/* 开关滑块的圆角 */
.switch .slider.round {
  border-radius: 34px;
}
/* 开关输入框样式 */
.switch input {
  display: none;
}
/* 开启状态的滑块样式 */
.switch input:checked + .slider {
  background-color: #2196F3;
}
/* 开启状态的滑块位置 */
.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* 开关圆点样式 */
.switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

一个基本的开关图标就完成了。我们可以展示在网页上，看到开关处于关闭状态。

实现开关切换功能

现在我们已经拥有了一个基本的开关图标，但是它还不能实现状态的切换，当我们点击它时它什么也不会发生。

使用JavaScript

要实现图标的开关切换，需要借助JavaScript。我们可以使用事件监听器来监听开关的点击事件，然后根据当前的状态来切换它的状态。

// 获取开关元素

var switchBtn = document.querySelector('.switch input[type="checkbox"]');
// 监听开关点击事件
switchBtn.addEventListener('click', function() {
  if (this.checked) {
    console.log('开关已打开');
  } else {
    console.log('开关已关闭');
  }
});

从上面的代码可以看出，我们首先获取<input type="checkbox">元素，并添加点击事件监听器，然后判断当前开关的状态。如果状态为开启，则输出“开关已打开”，否则输出“开关已关闭”。

改变开关状态

现在我们可以监听开关的点击事件，但是这并没有改变开关的状态。我们需要使用checked属性来改变它的状态。当属性值为true时，开关为开启状态；当属性值为false时，开关为关闭状态。

// 获取开关元素

var switchBtn = document.querySelector('.switch input[type="checkbox"]');
// 监听开关点击事件
switchBtn.addEventListener('click', function() {
  if (this.checked) {
    console.log('开关已打开');
  } else {
    console.log('开关已关闭');
  }
  
  // 切换开关状态
  this.checked = !this.checked;
});

我们在监听器中添加一行代码this.checked = !this.checked;，用来切换开关状态。当开关处于关闭状态时，this.checked值为 false，将其赋值为true来打开开关；当开关处于开启状态时，this.checked值为 true，将其赋值为false来关闭开关。

总结

在本文中，我们学习如何使用前端基础知识，制作一个简单的html开关图标，并实现了点击开关状态的切换效果。通过此次学习，我们不仅了解到如何使用HTML和CSS来创建开关元素，还掌握了使用JavaScript来监听事件和改变开关状态的方法。