Control the light switch with js
|
Use js to control the light switch for your reference. The specific contents are as follows topic:Control the light switch through js analyze:Get the light bulb element, bind a click event to it, and turn the light bulb on and off by clicking the mouse Implementation method:Method 1: Get the image element and control the light switch by binding the click event to the button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Switch Case</title>
</head>
<body>
<img src="./img/关.gif" alt="">
<button id="open">Turn on the light</button>
<button id="close">Turn off the light</button>
</body>
<script>
var open = document.getElementById("open");
var close = document.getElementById("close");
var img = document.getElementsByTagName("img")[0];
open.onclick=function(){
img.src="./img/开.gif"
}
close.onclick=function(){
img.src="./img/关.gif"
}
</script>
</html>Summary: This method is relatively simple and not prone to errors. By binding the button, you can directly obtain the corresponding light switch image. Running results:
Related methods:
Method 2: Get the image element and bind the switch event directly to the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Switch Case</title>
</head>
<body>
<img src="./img/关.gif" alt="">
</body>
<script>
var img = document.getElementsByTagName("img")[0];
var flag = false;
img.onclick=function(){
if(flag){
img.src="./img/关.gif";
flag=false;
}else{
img.src="./img/开.gif";
flag=true;
}
}
</script>
</html>Note: This method requires a flag to determine the initial state of the light. When binding a click event directly to the image, be aware that the initial value of the flag is false. Running result: When you click the light bulb, the light switches between bright and dark. Related images:
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:
|
<<: Solution to forget password when installing MySQL on Linux/Mac
>>: VMware Tools installation and configuration graphic tutorial for Ubuntu 16.04 64-bit
Recommend
Learn the operating mechanism of jsBridge in one article
Table of contents js calling method Android 1.js ...
JavaScript method to delete or extract specified characters from a string (very commonly used)
Table of contents 1. substring() 2. substr() 3.in...
Native js realizes the drag and drop of the nine-square grid
Use native JS to write a nine-square grid to achi...
JavaScript to achieve accordion effect
This article shares the specific code for JavaScr...
WeChat applet realizes the effect of swiping left to delete list items
This article shares the specific code for WeChat ...
Commonplace talk about the usage of MYSQL pattern matching REGEXP and like
like LIKE requires the entire data to match, whil...
Teach you how to implement the observer mode in Javascript
Table of contents What is the Observer Pattern? S...
Create a code example of zabbix monitoring system based on Dockerfile
Use the for loop to import the zabbix image into ...
Sample code for programmatically processing CSS styles
Benefits of a programmatic approach 1. Global con...
Detailed explanation of MYSQL large-scale write problem optimization
Abstract: When people talk about MySQL performanc...
Solution to MySql Error 1698 (28000)
1. Problem description: MysqlERROR1698 (28000) so...
Detailed explanation of using grep command in Linux
Linux grep command The Linux grep command is used...
Detailed steps for configuring mysql8.0.20 with binlog2sql and simple backup and recovery
Table of contents First step installation Step 2:...
The easiest way to debug stored procedures in Mysql
A colleague once told me to use a temporary table...
Summary of methods to include file contents in HTML files
In the forum, netizens often ask, can I read the ...