javascpirt + HTML实现点亮灯泡

点击图片，则灯泡点亮。代码其实很简单，就是通过点击事件，切换图片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>

javascpirt + HTML实现点亮灯泡相关推荐

100个犯人和一个亮灯泡_每个人都在一个开放的组织中更换灯泡
100个犯人和一个亮灯泡在以前的组织中,我与行政人员建立了良好的关系. 我购买了大量商品,那位员工帮助了我的团队处理我们的采购订单. 反过来,我们将帮助员工完成其他任务,例如在办公室更换烧坏的照明灯 ...
STM32F4 点亮灯泡【顺序点亮、按键点亮】
一.顺序点亮灯泡 ①初始化在user.c文件中,我们需要对LED进行初始化设置. 在函数LED_GPIO_Config中,可以修改代码如下: /*************************** ...
20210421用一条电线和一颗电池点亮灯泡，麻省理工(MIT)毕业生竟然不会？
https://www.ednchina.com/news/a6789.html 20210421用一条电线和一颗电池点亮灯泡,麻省理工(MIT)毕业生竟然不会? 时间:2021-04-21 作者:P ...
使用SDL编写一个拖动开关点亮灯泡的程序
对于SDL我也只是一个初学的菜鸟,接下来和大家分享一个我自己写的拖动开关点亮灯泡的一个C++程序. 如果你同样是一个SDL的初学者,那么推荐给你一个连接:http://adolfans.github. ...
Python_day21--练习--点亮灯泡、表格隔行变色
一.点亮灯泡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
javascpirt + HTML实现开关点亮灯泡
首先需要几张图片: 接下来就到写代码了(大体思路是先插入上面的图片,点击图片自动切换,利用document.getElementById()找到图片中的id并根据点击onclick:switch()来 ...
亮灯泡科技php,记科学小实验《灯泡亮了》
楼盘推广启动沙漏多米诺启动仪式激光船舵专业销售,庆典启动沙漏,开业活动沙漏,发布会多米诺启动仪式,诺骨牌由300个块骨牌组成,也就是说由300多幅画面组成,一般制作时间要3-4天这样,多米诺启动仪式 ...
亮灯泡科技php,科学网—科学课，加点科学史的佐料！——以《点亮小灯泡》教学实录为例 - 王鹏的博文...
基于发现的教学设计,再加点科学史的佐料 --以<点亮小灯泡>教学实录为例 (注:本图片及封面用图来自网络) 一.教学设计分析 <点亮小灯泡>是教科版小学科学四年级下册第一单元& ...
.NET JavaScript点亮灯泡以及新建js文件作为外部代码
先两个灯泡挂这作为素材首先灯泡插入.net ,上篇有说过 1.插入灯泡 <img id="myimage" onclick="changeImage()&quo ...

javascpirt + HTML实现点亮灯泡

javascpirt + HTML实现点亮灯泡相关推荐

最新文章

热门文章