共计 3232 个字符，预计需要花费 9 分钟才能阅读完成。
版权所有：萌杰尔
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
我的微信群，欢送大家退出一起探讨技术