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

Mysql transaction isolation level principle example analysis

Blog

Detailed explanation of MySQL event modification events (ALTER EVENT), disabling events (DISABLE), enabling events (ENABLE), event renaming and database event migration operations

Blog

HTML 5.1 learning: 14 new features and application examples

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

Mysql transaction isolation level principle example analysis

Detailed explanation of MySQL event modification events (ALTER EVENT), disabling events (DISABLE), enabling events (ENABLE), event renaming and database event migration operations

HTML 5.1 learning: 14 new features and application examples

Node implements search box for fuzzy query

JavaScript recursion detailed

Example of using Docker Swarm to build a distributed crawler cluster

Docker container connection implementation steps analysis

In-depth analysis of MySQL database transactions and locks

Vue component encapsulates sample code for uploading pictures and videos

vue3 custom directive details

Recommend

Linux system opens ports 3306, 8080, etc. to the outside world, detailed explanation of firewall settings

MySQL grouping queries and aggregate functions

How to handle spaces in CSS

Detailed explanation of Vue's TodoList case

Detailed explanation of the difference between Oracle10 partitions and MySQL partitions

In-depth explanation of the locking mechanism in MySQL InnoDB

Let’s talk in detail about how browsers view closures

How to pass W3C validation?

Summary of uncommon operators and operators in js

The role and opening of MySQL slow query log

MySql 8.0.11-Winxp64 (free installation version) configuration tutorial

MySQL query example explanation through instantiated object parameters

Detailed process record of nginx installation and configuration

Nginx implements high availability cluster construction (Keepalived+Haproxy+Nginx)

Four modes of Oracle opening and closing