JavaScript 开关灯泡

news/2024/11/7 14:32:10/

       实现:点击按钮让图片关灯变为开灯,循环点击则同步更新状态。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>点灯开关</title></head><body><!-- 设置点击事件 --><input  type="button" value="开/关灯" onclick="changeImg()"/><br/>   <!--  src=关灯图片  默认设置为关灯--><img src="./img/off.gif" id="img1"><br /></body><script>var flag="off"; //设置状态 off为关灯  on为开灯function changeImg(){let oimg1 = document.getElementById("img1");//找到img并返回 储存if(flag=="off"){	//判断状态  循环点击更换图片oimg1.src="img/on.gif";//更换图片flag="on";//更新状态}else{oimg1.src="img/off.gif";//更换图片flag="off";//更新状态}}</script>
</html>


http://www.ppmy.cn/news/833646.html

相关文章

HTML5实现点击触发灯泡开关

效果图 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 代码 代码如下&#xff08;示例&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv&qu…

html点击一个页面变亮,用html写 点击灯泡变亮

var i 0; var picture ["bg1.jpg","bg0.jpg"]; var picture1 ["bg3.jpg","bg2.jpg"]; function getTime(){ //创建时间对象 var time new Date(); //获取当前年份 var year time.getFullYear(); //获取当前月份 var month time.…

JavaScript特效——开关灯泡

准备 首先要准备两张图片&#xff0c;一张是灯泡亮的图片&#xff0c;取名为on.jpg&#xff0c;另一张是灭的图片&#xff0c;取名为off.jpg&#xff0c;都放置到当前的目录下。 代码 <!DOCTYPE html> <html> <head><meta charset"utf-8">…

震惊!!!!JAVASCRIPT竟然可以写出这样的灯泡效果

这里是效果预览 以下是全部代码,改一下图片路径可以直接使用! (应付老师作业的首选帖子!!!) 如果担心抄作业被发现,可以"CV"后看一下代码的讲解 ` <!doctype html> <head><meta charset="utf-8"><title></title><styl…

js控制开关灯泡

js控制开关灯泡 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible"…

js灯泡开关编写

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body> //图片路径 <img src"1.png.png" id"image" width"382" height"5…

vue 灯泡开关

话不多说&#xff0c;直接上代码 样式&#xff1a; <style> .content{ height: 500px; width: 800px; overflow: hidden; text-align: center; } .content img{ …

JS实现灯泡亮熄特效

** JS实现灯泡亮熄特效 首先打开HBUilder软件,创建HTML文件 输入代码 <body><img src="1.png.jpg" width="160" height="120" alt="" onclick="toggle()" id="bulb"><div id="timer"…