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
The meaning of status code in HTTP protocol
A status code that indicates a provisional respon...
Springboot uses vue+echarts front-end and back-end interaction to realize dynamic donut chart
Table of contents Preface 1. Environment Configur...
Example of creating a virtual host based on Apache port
apache: create virtual host based on port Take cr...
How to install theano and keras on ubuntu system
Note: The system is Ubuntu 14.04LTS, a 32-bit ope...
Nginx operation and maintenance domain name verification method example
When configuring the interface domain name, each ...
Transplanting the mkfs.vfat command in busybox under Linux system
In order to extend the disk life for storing audi...
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Solution to the problem that a line is left blank for no reason on the utf8-encoded page under IE and the utf8 page cannot be displayed
The reason is that all files are encoded in utf8. ...
How to install and use Cockpit on CentOS 8/RHEL 8
Cockpit is a web-based server management tool ava...
Solution to the problem that mixin does not work in scss (browser cannot compile it)
Mixin method: The browser cannot compile: The old...
Vue basics MVVM, template syntax and data binding
Table of contents 1. Vue Overview Vue official we...
Deploy Varnish cache proxy server based on Centos7
1. Varnish Overview 1. Introduction to Varnish Va...
Not a Chinese specialty: Web development under cultural differences
Web design and development is hard work, so don&#...
Detailed explanation of Linux lsof command usage
lsof (list open files) is a tool to view files op...
Research on Web Page Size
<br />According to statistics, the average s...