js灯泡开关编写

news/2024/11/23 4:38:41/

<!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)

js灯泡开关编写

相关文章

vue 灯泡开关

JS实现灯泡亮熄特效

剑指 Offer 39. 数组中出现次数超过一半的数字 / LeetCode 169. 多数元素（排序、哈希、分治等）

js中简单的灯泡亮暗事件时间的获取js新建HTML标签

开关灯效果HTML,JS实现灯泡开关特效

javascpirt + HTML实现点亮灯泡

319.灯泡开关

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