JavaScript implements changing the color of a web page through a slider

Hello everyone, today when I was looking at the HTML of the web front end, I saw that when the type attribute of the input tag was range, a slider was displayed on the page. I suddenly wondered if I could change the color of the web page by sliding it. Now I will share with you how to change the color of a web page through a slider.

First of all, we need to know how to express colors. There are four ways to express colors:

1. Use the name of the color to indicate the color: red, green... etc.

2. Use # plus hexadecimal number: #FF0000/#F00 for red, #00FF00/#0F0 for green, etc.

3. Use rgb value: rgb(0,0,0) for black, rgb(255,255,255) for white....etc.

4. Expressed by RGBA value: RGBA (0,0,0,0.5) semi-transparent black, RGBA (255,0,0,.5) semi-transparent red (the a value indicates transparency)

I use RGB values to represent colors. The value ranges of r, g, and b are all 0~255.

The settings of the slider in body: max is the maximum value, min is the minimum value, step is the step value, and there is also a value attribute that defaults to the middle value

<body id="box">
<label for="r">r value</label>
<input type="range" max="255" min="0" step="1" id="r">
<label for="g">g value</label>
<input type="range" max="255" min="0" step="1" id="g">
<label for="b">b value</label>
<input type="range" max="255" min="0" step="1" id="b">
</body>

JavaScript: Set a change event for each slider, which is executed when the slider value changes.

<script>
    //Function to get element by id function $(id) {
        return document.getElementById(id);
    }
    //Get the value of each slider let r = $('r').value
    let g = $('g').value
    let b = $('b').value
    //Get element by id let box = $('box')
    //Set the background color of the web page box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    //Set events for the r value slider$('r').addEventListener("change", function () {
        r = this.value;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //Set events for the g value slider $('g').addEventListener("change", function () {
        g = this.value;
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
    //Set the event for the b value slider $('b').addEventListener("change", function () {
        b = this.value
        box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
    })
</script>

Of course, there is also a way to change the color in the input

<input type="color" onchange="document.body.style.backgroundColor=this.value">

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript data visualization: ECharts map making
Super detailed basic JavaScript syntax rules
Detailed explanation of mandatory and implicit conversion of types in JavaScript
Detailed explanation of the differences between var, let and const in JavaScript es6
Detailed explanation of the this pointing problem in JavaScript
JavaScript function call, apply and bind method case study
Detailed explanation of the use of Arguments object in JavaScript
JavaScript CollectGarbage Function Example
Detailed explanation of BOM and DOM in JavaScript
JavaScript setTimeout and setTimeinterval use cases explained
JavaScript timer to achieve limited time flash sale function
JavaScript to implement limited time flash sale function
JavaScript Objects (details)

<<: MySQL master-slave configuration study notes

>>: How to install Docker and configure Alibaba Cloud Image Accelerator