版权所有：萌杰尔
Copyright: Menger
剽窃可耻
JavaScript五分钟实现一个开关组件
各位小伙伴们大家好，我是萌杰尔，良久没有写文了(始终水)，明天带着大家来实现一个开关组件吧
先不说别的，把代码丢上来
HTML
<switch id="switch"> <block></block></switch>CSS
:root { --switch-color: #3e3e3edd; --switch-block-off-color: lightcoral; --switch-block-on-color: lightgreen;}switch { width: 80px; height: 34px; float: left; border-radius: 17px; position: relative; background-color: var(--switch-color);}block { width: 40px; height: 30px; font-size: 10px; text-align: center; line-height: 30px; float: left; position: absolute; top: 2px; left: 2px; border-radius: 15px; transition: all .1s linear; background-color: var(--switch-block-off-color);}JavaScript
function $(element) { if (typeof element === 'string') { var selected = document.querySelectorAll(element); if (!selected) { console.log('Cannot find element: ' + element); return document.createElement('div'); } if (selected.length == 1) { return selected[0]; } return selected; } else { return element; }}var Switch = /** @class */ (function () { function Switch(argument) { this.element = $(argument.element); this.onclick = argument.onclick; this.block = this.element.children[0]; this.text = argument.text; this.status = false; this.block.innerText = this.text[1]; this.element.onclick = () => { if (this.status) { this.status = !this.status; } else { this.status = !this.status; } this.render(); }; } Switch.prototype.setStatus = function (status) { this.status = status; this.render(); }; Switch.prototype.render = function () { if (this.status) { this.block.style.backgroundColor = "var(--switch-block-on-color)"; this.block.style.left = "38px"; this.block.innerText = this.text[0]; } else { this.block.style.backgroundColor = "var(--switch-block-off-color)"; this.block.style.left = "2px"; this.block.innerText = this.text[1]; } this.onclick && this.onclick(this); }; return Switch;}());好了，接下来咱们解说代码
HTML
首先看HTML，这里就只有一个switch标签和一个block标签，或者你们素来没见过这两个标签，我也没见过，轻易用的，你能够用两个div代替，switch是开关主体，block是外面的小圆圈
CSS
接下来是CSS，这里次要就是switch标签和block标签的款式，你能够依据需要本人更改款式
JavaScript
重中之重来啦，JavaScript，先看第1行到第16行，这里实现了一个$函数，用于获取元素
接下来看第17行到第34行，这里是开关组件的构造函数，在构造函数一开始，咱们拿到配置(option，构造函数中的argument参数)中的element，并通过$函数获取该元素，此时，获取到的应是switch标签。
配置(option)和Switch类中的各项参数与属性
element：开关switch元素
onclick：点击事件，点击事件会在render函数完结前被调用
block：block元素
text：开关组件上显示的文字，用数组示意
status：开关组件以后的状态，用布尔示意
setStatus：设置状态函数
render：渲染函数
接下来咱们看第25行到第33行，这段代码中为switch元素新增了一个点击事件，其中如果status为false(关)时，status变成true(开)，反之亦然。
在点击事件完结之前(第32行)会调用render函数从新渲染，那么咱们来看一看render函数的具体实现(第39行到第51行)。
咱们来看第39行到第51行，这里首先判断status是否为true(开)，依据status来更改switch元素中的block元素的背景色彩、地位和文本。
第五十行这里调用了配置中的onclick函数，并将this当作参数传回去。
最初的最初，咱们来看第35行到第38行，setStatus函数，该函数就只有两行，一行是依据参数中的status设置this.status，第二行就是调用render函数来更改开关组件的款式。
应用组件
<body> <input type="button" value="点我查看开关状态" id="status"> <switch style="margin: 10px 0px 0px 0px;" id="switch"> <block></block> </switch> <button id="open-switch" style="margin: 10px 0px 0px 0px;">点我将开关强制关上</button> <button id="close-switch" style="margin: 10px 0px 0px 0px;">点我将开关强制敞开</button> </body> <script> //申明并实例化Switch对象，每次点击switch，会在渲染完结后打印以后状态 var sth = new Switch({ element: '#switch', text: ['开', '关'], onclick: (instance) => { console.log(instance.status); } }) //点击#status元素，switch渲染后弹出前窗台 $('#status').onclick = () => { alert(sth.status) } //点击#open-switch元素，关上switch $('#open-switch').onclick = () => { sth.setStatus(true); } //点击#close-switch元素，敞开switch $('#close-switch').onclick = () => { sth.setStatus(false); } </script>这就是明天给大家带来的小文章啦，感激大家浏览。
QQ群: 788951007
我的微信群，欢送大家退出一起探讨技术