关于javascript:JavaScript五分钟实现一个开关组件

版权所有：萌杰尔

Copyright: Menger

剽窃可耻

各位小伙伴们大家好，我是萌杰尔，良久没有写文了(始终水)，明天带着大家来实现一个开关组件吧

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，这里就只有一个switch 标签和一个 block 标签，或者你们素来没见过这两个标签，我也没见过，轻易用的，你能够用两个 div 代替，switch是开关主体，block是外面的小圆圈

接下来是 CSS，这里次要就是switch 标签和 block 标签的款式，你能够依据需要本人更改款式

重中之重来啦，JavaScript，先看 第 1 行 到第 16 行 ，这里实现了一个$ 函数，用于获取元素

接下来看 第 17 行 到第 34 行 ，这里是开关组件的 构造函数 ，在 构造函数 一开始，咱们拿到配置 (option，构造函数中的argument 参数)中的 element，并通过$ 函数获取该元素，此时，获取到的应是 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
我的微信群，欢送大家退出一起探讨技术

关于javascript:JavaScript五分钟实现一个开关组件

JavaScript 五分钟实现一个开关组件

先不说别的，把代码丢上来

HTML

CSS

JavaScript

配置 (option) 和Switch类中的各项参数与属性

应用组件