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: