JavaScript color viewer
|
This article example shares the specific code of JavaScript to implement the color viewer for your reference. The specific content is as follows Achieve results
Implementation Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Color Viewer</title>
<style>
#color {
width: 150px;
height: 150px;
background-color: #fff;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="color"></div>
<input id="inp" type="text" placeholder="Please enter the color code..." />
<button id="trans">View Color</button>
<button id="rst">Restore</button>
</body>
<script>
let trans = document.getElementById('trans');
let color = document.getElementById('color');
let inp = document.getElementById('inp');
let rst = document.getElementById('rst');
trans.addEventListener('click', () => {
color.style.backgroundColor = inp.value;
});
rst.addEventListener('click', () => {
color.style.backgroundColor = '#fff';
inp.value = '';
});
</script>
</html>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:
|
<<: Detailed installation and use of SSH in Ubuntu environment
>>: Summary of common functions of PostgreSQL regular expressions
Recommend
Implementation of mysql data type conversion
1. Problem There is a table as shown below, we ne...
A detailed explanation of the overlapping and soft color matching method in web page color matching
This article does not have any quibbles, it is jus...
How to deploy nextcloud network disk using docker
NextCloud You can share any files or folders on y...
Detailed explanation of commonly used nginx rewrite rules
This article provides some commonly used rewrite ...
The solution to the page not refreshing after the route changes after react jumps
Table of contents question Solution question Ther...
Native JS realizes compound motion of various motions
This article shares with you a compound motion im...
Detailed explanation of the available environment variables in Docker Compose
Several parts of Compose deal with environment va...
Detailed process of installing Presto and connecting Hive in Docker
1. Introduction Presto is an open source distribu...
Detailed explanation of screen command usage in Linux
GUN Screen: Official website: http://www.gnu.org/...
Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare
How to solve the problem of being unable to acces...
Detailed explanation of the execution plan explain command example in MySQL
Preface The explain command is the primary way to...
How to use gdb to debug core files in Linux
1.core file When a Segmentation fault (core dumpe...
MySQL 5.6 root password modification tutorial
1. After installing MySQL 5.6, it cannot be enabl...
A brief analysis and sharing of the advantages and disadvantages of three tree structure table designs in MYSQL
Table of contents Introduction question Design 1:...
Detailed tutorial on installing Docker on CentOS 7.5
Introduction to Docker Docker is an open source c...