js灯泡开关编写

news/2024/11/7 17:01:24/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
//图片路径
```<img src="1.png.png" id="image" width="382" height="578"><br>
//创建一个开关
<input type="button" value="开关" onclick="begin()">
//div里面放开关灯及时间提示
<div id="time" style="width: 200px;background-color: burlywood "></div>
//定义一个函数,控制灯泡的开关。
<script>var imgs = ["2.png.png","1.png.png"];var i = 0;function begin() {document.getElementById("image").src = imgs[i];if (i==0){i=1;document.getElementById("time").innerHTML += date()+"<p>灯亮了</p><br>";}else {i=0;document.getElementById("time").innerHTML += date()+"<p>灯关了</p><br>";}}//定义一个函数 获取时间function date() {var thisDate = new Date();var str = ['日','一','二','三','四','五','六']var year = thisDate.getFullYear();    //获取完整的年份(4位,1970-????)var month = thisDate.getMonth()+1;       //获取当前月份(1-12)var day = thisDate.getDate();        //获取当前日(1-31)var week = str[thisDate.getDay()];         //获取当前星期X(0-6,0代表星期天)var thistime = thisDate.toLocaleTimeString();     //获取当前时间//获取完整日期时间var day = year + "-" + month + "-" + day + "-" +"星期" +week + thistime;return day;}
</script>
</body>
</html>
这是两个图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191013224502915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc2N4cw==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019101322455678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nzc2N4cw==,size_16,color_FFFFFF,t_70)

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

相关文章

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;

javascpirt + HTML实现点亮灯泡

点击图片&#xff0c;则灯泡点亮。代码其实很简单&#xff0c;就是通过点击事件&#xff0c;切换图片URL源。 1.函数changeImage()被注册到<img标签的点击事件中&#xff0c;点击图片则调用此函数。 <!DOCTYPE html> <html> <head> <meta charset&q…

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…