js 灯泡开关

于 2022-08-26 22:21:19 发布
阅读量106 收藏
点赞数
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Korey__/article/details/126551123
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .wrap {

            width: 100%;

            height: 100%;

            display: flex;

            flex-wrap: wrap;

        }

        img {

            display: inline-block;

            width: 74px;

            height: 115px;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">

        <img src="./img/dark.jpg" alt="">




 

    </div>

    <script>

        var oImg = document.getElementsByTagName("img");

        for (var i = 0; i < oImg.length; i++) {

            oImg[i].tag = true;

            oImg[i].onmouseover = function () {

                console.log(this.tag)

                if (this.tag) {

                    this.src = "./img/bright.jpg";

                    this.tag = false;

                } else {

                    this.src = "./img/dark.jpg";

                    this.tag = true;

                }

            }

        }

    </script>

</body>

</html>

岄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现开关灯效果
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-30 426
JavaScript实现开关灯效果
js灯泡开关编写
ssscxs的博客
10-13 179
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> //图片路径 ```<img src="1.png.png" id="image" width...
js做轮播图（简单版的）
datuzidppd5556的博客
08-09 329
js做轮播图（简单版的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
319. 灯泡开关（JS实现）
zjw_python的博客
08-17 504
1 题目 初始时有 n 个灯泡关闭。 第 1 轮，你打开所有的灯泡。 第 2 轮，每两个灯泡你关闭一次。 第 3 轮，每三个灯泡切换一次开关（如果关闭则开启，如果开启则关闭）。第 i 轮，每 i 个灯泡切换一次开关。 对于第 n 轮，你只切换最后一个灯泡的开关。 找出 n 轮后有多少个亮着的灯泡。 示例: 输入: 3 输出: 1 解释: 初始时, 灯泡状态 [关闭, 关闭, 关闭]. 第一轮后, 灯泡状态 [开启, 开启, 开启]. 第二轮后, 灯泡状态 [开启, 关闭, 开启]. 第三轮后, 灯泡状态
JS实现灯泡开关特效
10-16
主要为大家详细介绍了JS实现灯泡开关特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
##JavaScript灯泡开关
qq_44890539的博客
10-13 376
JavaScript灯泡开关 ![](https://img-blog.csdnimg.cn/20191013152508450.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODkwNTM5,size_16,color_FF...
js实现开关灯泡
f875221024的博客
10-13 556
js点击事件实现的一个小功能小功能先看一下新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 小功能先看一下 新的...
JS电灯开关案例
小苏(º﹃º )的博客
04-20 752
利用js控制电灯开关题目：分析：实现方法：方法一：方法二： 题目：   通过js来控制电灯的开关 分析：   获取电灯泡元素，给它绑定点击事件，通过鼠标点击来实现电灯泡的开关 实现方法： 方法一：   获取图片元素，通过给按钮绑定点击事件来控制电灯开关 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
JavaScript实现电灯开关小案例
10-15
在JavaScript编程中，实现电灯开关小案例是一个基础但有趣的实践，它可以帮助初学者更好地理解事件处理、DOM操作以及变量状态的控制。在这个案例中，我们利用JavaScript来模拟现实世界中的电灯开关行为，通过点击...
JavaScript实现灯泡开关
jb18602754485的博客
03-29 1581
实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电灯开关</title> </head> <body> <img src="img/off.gif" id="light"> <script> var light = document.getElementById(
简单版轮播图
weixin_30677475的博客
01-28 69
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>* { margin: 0; padding: 0; } ul, ol { list-style: none;...
简单轮播图
m0_55132979的博客
04-30 1030
（一）实现的效果 1.点击左右按钮切换图片 （二）基本布局 1.图片横向排列，借助overflow：hidden；让显示区域以外的内容不显示就行了 （三）动画效果 1.通过JS实现动画效果，调用animation()函数 （四）实现无缝切换效果 1.当轮播图翻页时，是完整的一张图均匀翻过去，将第一张图片复制添加到末尾起到过度作用 <!doctype html> <html> <head> <meta charset="utf-8"> <
图片轮播简单版
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-13 709
简单版的图片轮播 body部分 &lt;style type="text/css"&gt; .ani-span{ position: absolute; } .title{ position: absolute; cursor: pointer; left: 83px; display: inline-block; top: 200px } &lt;/style&gt; &lt;div st...
JavaScript电灯开关
hqw200424的博客
03-27 1004
1.先给body标签一个ID. 2.在设置一个button标签给它设置ID. 3.设置一个script标签.用var 声明变量，并获取它的ID. 4.最后设置点击事件就可以了.
初学者简易轮播图实现
wcl0210的博客
01-18 613
因为自己也是个初学者，所以都是使用了最简单的原理来实现。欢迎借鉴和批评
js点亮灯泡
我的个人博客
03-19 900
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点亮灯泡</title> <style type="text/css"> #img{ width:109px; ...
使用JS实现灯泡开关动画效果
"该资源是一个使用JavaScript实现的灯泡开关特效的示例代码，包括HTML、CSS和JavaScript三个部分。用户点击"开灯"或"关灯"的链接，会切换灯泡图片来模拟灯泡的开启和关闭，并在页面上显示当前状态。此外，还显示了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值