javascpirt + HTML实现点亮灯泡

news/2024/11/7 18:40:18/

点击图片,则灯泡点亮。代码其实很简单,就是通过点击事件,切换图片URL源。

1.函数changeImage()被注册到<img标签的点击事件中,点击图片则调用此函数。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><script>
function changeImage()
{element=document.getElementById('myimage')if (element.src.match("bulbon")){element.src="/images/pic_bulboff.gif";}else{element.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508686706121&di=978f369aad7ee3005239a5cbe761f6cb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fe824b899a9014c08dbf74283007b02087af4f4cc.jpg";}
}
</script>
<img id="myimage" οnclick="changeImage()"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509281363&di=7223b11b93d963f1b7c5da410b44f994&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F0823dd54564e92585387abcb9682d158ccbf4e67.jpg" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p></body>
</html>

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

相关文章

319.灯泡开关

319.灯泡开关 初始时有 n 个灯泡处于关闭状态。第一轮&#xff0c;你将会打开所有灯泡。接下来的第二轮&#xff0c;你将会每两个灯泡关闭一个。 第三轮&#xff0c;你每三个灯泡就切换一个灯泡的开关&#xff08;即&#xff0c;打开变关闭&#xff0c;关闭变打开&#xff09…

JavaScript ----点击事件 * 点击图片改变图片路径,达到开关灯效果

<!DOCTYPE html> <html> <head lang"en"> <meta charset"UTF-8"> <title></title> <script language"JavaScript"> /* * 点击图片改变图片路径 * */ va…

python控制灯泡_人工智能应用-手把手教你用Python硬件编程实现打开或关闭电灯泡...

之前我们已经给广大爱好者或程序员朋友们,带来了硬件版的或者说物联网版本的Hello World C++Builder版、Delphi、Visual Basic.Net等的程序源码和教学资料,让大家对硬件控制带来一个崭新的认识。有不少读者用户,建议我们出一套Python的智能硬件控制程序。先简单地来引入一些…

闪烁的灯泡

闪烁的灯泡 学习路线&#xff1a;JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡 简介&#xff1a;这是一个用来理解JS定时器函数的&#xff0c;小案例&#xff0c;制造一个可以闪烁的灯泡。 素材&#x…

亮灯泡科技php,记科学小实验《灯泡亮了》

楼盘推广启动沙漏多米诺启动仪式激光船舵专业销售&#xff0c;庆典启动沙漏&#xff0c;开业活动沙漏&#xff0c;发布会多米诺启动仪式&#xff0c;诺骨牌由300个块骨牌组成&#xff0c;也就是说由300多幅画面 组成&#xff0c;一般制作时间要3-4天这样&#xff0c;多米诺启动…

js小灯泡

使用vsc写入 src" " ——其中输入图片的存放地址 方法1&#xff1a; <img id"light" src"D:/phpStudy/PHPTutorial/WWW/dengpao/p2.gif"><script> var lightdocument.getElementById("light") var f false light.oncli…

灯泡开关案例

1,获取按钮对象; 2,绑定事件:这里l两种方式:一种绑定图片,另一种绑定按钮开关; 3,定义一个标记变量,与图片的状态同步,这里是最重要的. <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"…

灯泡点亮效果

首先打一个div在给他一个类,然后我就复制 两个在改一下里面的类名。 之后css放两张不同灯泡的图片和下面的那个 灯丙设置他的宽度和高度用绝对定位或者是 用外边距为auto,移动到中间的这个位置, 在中间的类名加一个鼠标移入指针就会变成 小手的设置,第三个是加一个display…