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
Solution to failure in connecting to mysql in docker
Scenario: After installing the latest version of ...
MySQL 8.0.18 installation and configuration method graphic tutorial under win10 (windows version)
This article records the installation and configu...
Implementing image fragmentation loading function based on HTML code
Today we will implement a fragmented image loadin...
MySQL query specifies that the field is not a number and comma sql
Core SQL statements MySQL query statement that do...
How to remove inline styles defined by the style attribute (element.style)
When modifying Magento frequently, you may encount...
DIV common tasks (Part 1) — General tasks (show scrollbars/hide divs/disable event bubbling, etc.)
As the most commonly used layout element, DIV play...
Detailed explanation of template tag usage (including summary of usage in Vue)
Table of contents 1. Template tag in HTML5 2. Pro...
SQL implementation of LeetCode (177. Nth highest salary)
[LeetCode] 177.Nth Highest Salary Write a SQL que...
Perform data statistics on different values of the same field in SQL
Application scenario: It is necessary to count th...
Briefly describe the use and description of MySQL primary key and foreign key
Table of contents 1. Foreign key constraints What...
JavaScript implements constellation query function with detailed code
Table of contents 1. Title 2. Code 3. Results IV....
js converts a multidimensional array into a one-dimensional array and then reorders it
Table of contents Let's talk about flattening...
CocosCreator learning modular script
Cocos Creator modular script Cocos Creator allows...
CentOS uses local yum source to build LAMP environment graphic tutorial
This article describes how to use the local yum s...
Detailed explanation of the use of base tag in HTML
In requireJS, there is a property called baseURL....