Copyright: Mengjie. All Rights Reserved

Copyright: Menger

Plagiarism shameful

JavaScript implements a == switch == component in five minutes

Hello everyone, my name is Mengjie, I haven’t written for a long time. Today, I will take you to realize a switch module

First of all, throw the code up

HTML

<switch id="switch">
	<block></block>
</switch>
Copy the code

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);
}
Copy the code

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 {
        returnelement; }}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);
    };
    returnSwitch; } ());Copy the code

Okay, so let’s talk about code

HTML

So HTML first, there’s just a switch tag and a block tag, and you’ve probably never seen those two tags before, and NEITHER have I, but you can use them, you can use two divs instead, the switch is the body of the switch, and the block is the little circle inside

CSS

Next up is CSS, which focuses on the styles of switch tags and block tags. You can change the styles as required

JavaScript

Most importantly, JavaScript, lines 1 through 16 implement a **$** function to get elements

At the beginning of the constructor, we take the element in the configuration (option, the argument argument in the constructor) and use the **$function to get that element. In this case, we get the switch tag.

configuration(option) andSwitchItems in a classparameterwithattribute

Element: Switch the switch element

Onclick: the click event that will be called before the render function ends

Block: block element

Text: The text displayed on the switch component, represented in an array

Status: Current status of the switch component, expressed in Booleans

SetStatus: Sets the status function

Render: render function

Next, in lines 25 through 33, we add a click event to the switch element, where status becomes true if it is false(off) and vice versa.

The render function is called to rerender before the click event ends (line 32), so let’s take a look at the implementation of the render function (lines 39 through 51).

Let’s look at lines 39 through 51, where we first check whether status is true(on) and change the background color, position, and text of the block element in the switch element based on status.

Line 50 calls the onclick function in the configuration and passes this back as an argument.

Finally, on lines 35 through 38, the setStatus function has only two lines. One line sets this.status according to the status parameter, and the second line calls the render function to change the style of the switch component.

Using the component

  <body>
  
      <input type="button" value="Click on me to check the switch status." id="status">
      
      <switch style="margin: 10px 0px 0px 0px;" id="switch">
        <block></block>
      </switch>
      
      <button id="open-switch" style="margin: 10px 0px 0px 0px;">Click on me to force the switch on</button>
      
      <button id="close-switch" style="margin: 10px 0px 0px 0px;">Click on me to force the switch off</button>
      
  </body>
  <script>
  // Declare and instantiate the Switch object. Each time Switch is clicked, the current state will be printed after rendering
    var sth = new Switch({
      element: '#switch'.text: ['开'.'off'].onclick: (instance) = > {
        console.log(instance.status); }})// Click the #status element to render the switch and pop up the front sill
    $('#status').onclick = () = > {
      alert(sth.status)
    }
	
	// Open switch by clicking the #open-switch element
    $('#open-switch').onclick = () = > {
      sth.setStatus(true);
    }
	
	// Close the switch by clicking the #close-switch element
    $('#close-switch').onclick = () = > {
      sth.setStatus(false);
    }
  </script>
Copy the code

This is today to bring you a small article, thank you for reading.

QQ group: 788951007