js to achieve the effect of light switch
|
This article example shares the specific code of js to achieve the light switch effect for your reference. The specific content is as follows Through a study of js, let's complete a small case of simulating a light switch. First, let's analyze this case. The process is as follows: 1. Get image properties 2. Bind click event 3. Switch images when clicking 1. Turn on and off the light with a button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/on.gif" alt="" id="img"> <br><!--Picture-->
<input type="button" id="bt1" value="on" onclick="f1()"><!--Button-->
<button id="bt2" onclick="f2()">Close</button>
</body>
<script>
function f1() {//Open let bt1=document.getElementById("bt1");//Get button id
let img=document.getElementById("img"); //Get the image id
img.src="imgs/on.gif"; //Modify the image}
function f2() {//Close let bt2=document.getElementById("bt2");
let img = document.getElementById("img");
img.src="imgs/off.gif";
}
</script>
</html>Running results:
2. Turn the light on and off by clicking on it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/off.gif" alt="" id="img"> <br>
</body>
<script>
let img = document.getElementById("img");
img.onclick=f;
let flag = false;
function f() {
if (flag==true){
img.src="imgs/off.gif"
flag=false;
}else {
img.src="imgs/on.gif"
flag=true;
}
}
</script>
</html>Simplified version (using the ternary operator)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="imgs/on.gif" height="180" width="109" id="img" onclick="f()">
</body>
<script>
let img = document.getElementById("img");
let i=0;
function f() {
img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
}
</script>
</html>Operation Results Turn the light on and off by clicking
Light bulb material:
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:
|
<<: MySQL 5.7.12 installation and configuration tutorial under Mac OS 10.11
>>: How to use jconsole to monitor remote Tomcat services
Recommend
Example code for CSS pseudo-classes to modify input selection style
Note: This table is quoted from the W3School tuto...
Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data
Table of contents Solution 1: Copy the transfer c...
MySQL Practical Experience of Using Insert Statement
Table of contents 1. Several syntaxes of Insert 1...
Sample code for implementing form validation with pure CSS
In our daily business, form validation is a very ...
Summary of some common writing methods that cause MySQL index failure
Preface Recently, I have been busy dealing with s...
How to start tomcat using jsvc (run as a normal user)
Introduction to jsvc In production, Tomcat should...
Border-radius IE8 compatible processing method
According to canisue (http://caniuse.com/#search=...
My personal summary of mysql 5.7 database installation steps
1.mysql-5.7.19-winx64.zip (this is the free insta...
Summary of MySQL's commonly used database and table sharding solutions
Table of contents 1. Database bottleneck 2. Sub-l...
Detailed explanation of explain type in MySQL
Introduction: In many cases, many people think th...
Record a pitfall of MySQL update statement update
background Recently, I executed a DML statement d...
How to detect whether a file is damaged using Apache Tika
Apache Tika is a library for file type detection ...
MYSQL master-slave replication knowledge points summary
An optimization solution when a single MYSQL serv...
Vue interpretation of responsive principle source code analysis
Table of contents initialization initState() init...
How to safely shut down MySQL
When shutting down the MySQL server, various prob...