用html和js制作一个控制灯泡开关效果

最新推荐文章于 2023-03-21 12:01:41 发布
最新推荐文章于 2023-03-21 12:01:41 发布
阅读量1.5k 收藏 2
点赞数 4
文章标签： js更换图片效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaowenbo1123/article/details/102536320
版权

用html和js制作一个控制灯泡开关效果

**用css样式来控制div图片和文本的位置，然后用js里面onclick点击事件来控制图片的更换效果来实现当前运行图的效果**

1、以下是运行的效果图
运行效果
2、下面是代码展示图片
这个是代码的css样式这个是html里面的代码这个是js里面的代码

小高想做码农
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
我是怎样制作这个逼真的红色开关的（纯CSS）
努力是为了站在万人之中，成为别人的光
03-24 6505
在制作过程中，我使用了各种不同的CSS技术，包括渐变，3D转换，动画和过渡。在本教程中，我将深入探讨其中的一些技术。 演示地址：http://haiyongcsdn.gitee.io/realistic-red-switch/ 模拟状态 开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。 为了解决这个问题，我们可以使用原生HTML元素之一。由于我们只需要维护2个状态，因此checkbox元素是一个不错的选择。我们可以使用:checkedCSS选择器根据复选框是否选中来应用CSS。 我们将整个内容包.
电灯泡开关
guan040313的博客
03-16 185
1.我们先创建一个html文件，并保存 2.然后给它一个开关按钮 3.使用这一串【var btn =document.querySelector("button"); var flag =0; btn.onclick=function(){ if(flag==0){ doc...
Html5做的博客，很漂亮（黑色带灯泡特效）
01-10
html5,特效漂亮。适合学习html+css的人
javascript+html灯泡开关 2种方式
最新发布
amz_java的博客
03-21 1548
灯泡开关
JS实现灯泡开关特效
星辰里的月光
10-13 3459
JS实现灯泡开关特效 并且显示时间，文字 首先准备两张图片：开灯ON.jpg：关灯OFF.jpg 效果图： 下面是具体实现代码： HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>开关灯特效</title> <link ...
HTML DOM 实例 点击灯泡 开/关 灯
Blocking The Sky
03-11 834
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>控制灯泡开/关</title> </head> <body> <script> function change_iamge() { element = document.getElementById("myimage")
入门级HTML5案例，开关灯效果。
11-26
在开灯状态下，有笑脸的形状。在关灯状态下，会有小鬼移动。主要运用的是css技术，JavaScript只用了一个。适合刚刚入门的选手，欢迎指出问题。。
用HTML.JS制作一个简单的灯泡
Mr_hanghang的博客
10-13 1644
作业目标 使用图片制作简单的灯泡开关操作 步骤 实现的最终结果 1 2 图片中点击灯泡可以使灯泡发光 图片中点击开关可以使灯泡发光并且右边文本框中显示什么时间灯亮和灯灭 代码块 CSS样式 <style> #xianshi{ background: black; color: red; } HTML具体代码 <img src="3.PNG" width...
js+css3灯泡开关黑白切换特效代码.zip
11-19
在本资源"js+css3灯泡开关黑白切换特效代码.zip"中，包含了一个使用JavaScript（js）和CSS3技术实现的灯泡开关特效。这个特效不仅展示了灯泡的开关状态，还实现了黑白颜色的切换，给用户带来独特的视觉体验。下面...
HTML5 SVG瓦斯灯泡动画特效特效代码
03-20
JavaScript库如jQuery或GreenSock Animation Platform (GSAP)可以进一步增强SVG动画的复杂性和控制性。在这个例子中，"jiaoben6266"可能是一个JavaScript脚本文件，包含了控制灯泡动画的逻辑。通过分析这个脚本，...
HTML5 电灯泡游戏.rar
07-10
HTML5 电灯泡游戏，最强电灯泡，本游戏玩法主要是把所有电灯泡都点亮吧!但是点亮所有电灯泡的步数越少越好，点亮你的智商！用最少的步骤点亮所有电灯，你也来试试吧！我试玩的情况是，我似乎无法把所有的电灯泡点亮，把这个点亮，其它的又灭了，这真有点搞笑哦，游戏运行界面如图所示。本源码的意义在于，通过游戏的编写熟悉各种HTML5属性的用法。
一个灯泡程序java 有界面的控制两个灯泡的亮暗的程序
09-22
是一个比较好的灯泡控制程序。 具体你可以下了然后自己看，还是蛮好的。自己写的哦，灯泡图片没
CSS3实现开关按钮，像电灯开关.rar
07-10
4种CSS3实现的开关按钮，像电灯开关一样的按钮，点击后打开开关，按钮上的灯会亮，再点击就关闭了按钮，用传统CSS实现的话，估计需要调用图片来修饰开关效果。本HTML5演示了按钮式、推拉式、上翘式、触摸式四种风格的按钮效果。
js实例：电灯泡
weixin_44957026的博客
10-13 552
js实例：电灯泡 你好！ 这是一个js实例，通过js语言来实现灯泡开关的 一个小功能！ 首先我们先看一下效果 点击前： 点击后： 再次点击后： 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head&...
JavaScript和HTML实现灯的开关
weixin_45747278的博客
10-13 1580
第五步：查看网页效果 第四步：编写js代码 // var t=time.toLocaleString(); function f(){ //创建一个Date对象 var time= new Date(); //获取当前到前的小时值 var hour=time.getHours(); //获取当前的分钟值 var minute=time.getMinutes(); //获取当前的分秒值 var se...
javascpirt + HTML实现点亮灯泡
qq_40740420的博客
10-22 2465
点击图片，则灯泡点亮。 菜鸟教程(runoob.com) function changeImage() { element=document.getElementById('myimage') if (element.src.match("bulbon")) { element.src="/images/pic_bulboff.gif"; } el
点击开关灯效果html,js实现电灯开关效果
weixin_32043813的博客
06-09 2225
本文实例为大家分享了js实现电灯开关效果的具体代码，供大家参考，具体内容如下通过对js的一个学习，我们来完成一个模拟电灯开关的小案例。首先对本案例进行一个分析，过程如下：1.获取图片属性2.绑定单击事件3.点击时切换图片1.通过按钮实现电灯开关Title 关function f1() {//开let bt1=document.getElementById("bt1");//获取按钮idlet im...
瞧瞧HTML+CSS3“灯泡”知识点
m0_46364033的博客
07-13 438
1.HTML: HyperText Markup Language 超文本标记语言，注意它非编程语言； 浏览器对其解析有兼容性的问题，不同的浏览器呈现的效果可能不同。 2.HTML和XHTML的区别： XHTML是HTML像XML的一个过渡语言 XHTML 必须正确嵌套 XHTML 所有元素必须被关闭 XHTML 区分大小写，其标签名必须用小写字母 XHTML 文档必须拥有根元素 XHTML 文档要求给所有属性赋一个值 XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示 XH
html 灯泡 菜鸟,cainiaoyizhan.html
weixin_34547167的博客
06-16 193
body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";font-size: 14px;}#l-map {height: 300px;width: 100%;}#r-result {width: 100%;}关键字输入提示词条请输入:function G(id) {return document.getElementBy...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值