JavaScript特效——开关灯泡

news/2024/11/22 23:25:06/

准备
首先要准备两张图片,一张是灯泡亮的图片,取名为on.jpg,另一张是灭的图片,取名为off.jpg,都放置到当前的目录下。

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><script>function change(){var img = document.getElementById('img');var src = img.src;if(src.indexOf('on') >=0 ){img.src = 'off.jpg';}else{img.src = 'on.jpg';}}</script>
</head>
<body><h1>开关灯泡</h1><img id='img' src="on.jpg" onclick="change();" width='200' height="200">
</body>
</html>

运行结果图
这里写图片描述
这里写图片描述


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

相关文章

震惊!!!!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"…

剑指 Offer 39. 数组中出现次数超过一半的数字 / LeetCode 169. 多数元素(排序、哈希、分治等)

题目&#xff1a; 链接&#xff1a;剑指 Offer 39. 数组中出现次数超过一半的数字&#xff1b;LeetCode 169. 多数元素 难度&#xff1a;简单 数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 你可以假设数组是非空的&#xff0c;并且给定的数组…

js中简单的灯泡亮暗事件时间的获取js新建HTML标签

思路&#xff1a; 先用div存放三个实物对象&#xff08;拉绳&#xff0c;开关&#xff0c;灯泡&#xff09;。 创建数组存放每个实物的两种状态&#xff08;亮暗&#xff0c;开关&#xff0c;上下&#xff09;。 通过id获取dom对象。 if else 语句进行判断那种情况下的实物状态…

开关灯效果HTML,JS实现灯泡开关特效

JS实现灯泡开关特效的具体代码,供大家参考,具体内容如下 并且显示时间,文字 首先准备两张图片:开灯ON.jpg:关灯OFF.jpg 效果图: 下面是具体实现代码: HTML:开关灯特效 时间: 默认关灯 开灯关灯CSS: body {color: #333;