一、前言
开关在前端中算是比较常用的组件之一，目前我见到其最广泛的用途是用在切换网站主题上的。
比如vue官网切换主题用的就是开关组件：
而且它这个开关组件还添加了图标样式。
本文的目标就是用html、css、js来实现一个与它一模一样的开关主键。
二、代码实现
开关组件在html中是没有原生标签的，所以这次我们直接使用div标签实现即可。
老规矩，还是先写好基本的代码：
首先第一步，将div的基本样式先写好：
主要是设置它的背景颜色、宽高、边框圆角、鼠标样式。
并且为它设置了一个相对定位，其目的是为了后面在它内部动态插入图标。
至于transition属性，则是用来设置变换动画的，比如这里的意思是设置背景颜色在0.5s内完成变化，这样的效果就是，一旦后面我们修改它的背景色，它不会立即变色，而是在0.5内完成缓慢变色。
然后下一步，我们还要在它内部写一个标签，用来存放图标：
这里在它内部写了一个span标签，用于存放图标，而主要的逻辑在js代码中：
首先是一个status变量，用于存放我们这个组件的开关状态。
然后是从网上复制的月亮与太阳图标代码：
这是用的svg格式完成的图标绘制，svg也可以看做是一个标签，只不过这里由于是js代码，用字符串形式存储比较方便。
注意以前我们使用的可能都是单引号、双引号的字符串，这里用的是键盘左上角的那个符号，可以使用换行的字符串形式。
然后下一步，使用icon标签上的innerHtml属性等于Sunny这个字符串，浏览器就会自动将这个字符串解析为标签作为它的内容：
正如刚才所说，svg也是一个标签，只不过稍微比较特别，它是用来画图的，一般我们都是直接网上去搜相关的svg图标复制下来就可以使用，也不用太过于纠结。
最后，我还为switch这个标签，也就是s这个变量，添加了一个点击事件，目的就是切换图标。
此时只要你在浏览器中点击它，它就会在两种图标中切换：
但这样太难看了，所以下一步，我们要给它添加样式：
首先是定位，因为外面父标签前面我们已经写好了相对定位，所以这里子标签直接绝对定位即可，并且调整好它的位置。
宽度、高度、行内块模式比较简单，span默认是行内模式，要切换为行内块模式才能设置宽高。
圆角刚好为宽高的一半，也就是圆形，背景色就不说了，最后又设置了一个transition，并且这次是两个属性变化均在0.5s内完成：left与background-color
目前我们还看不出这个属性的作用，不过后面我们马上就能看出来了。
最后还设置了一下svg标签的宽高与外边距，目的是把它放在圆正中间的位置。
此时点击它就能看到两个图标互相变化，效果已经算不错了。
然后下一步，我们还需要让其变色、并且动起来！
首先，我们得为它动态添加类：
