JS代码+实现亮/关灯

最新推荐文章于 2022-11-30 11:58:51 发布
最新推荐文章于 2022-11-30 11:58:51 发布
阅读量290 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyt_123456/article/details/102574901
版权
本文介绍了如何通过JavaScript实现一个简单的灯泡开关效果，包括点击灯泡和代码按钮触发亮灯或关灯的功能。
摘要由CSDN通过智能技术生成

标题 灯泡的点击

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img id="calss" src="img/p1.jpg" height="200" width="300" /><br />
		<div id="liss" height="100"  width="100"></div>
		<button id="push" onclick="reg()">按钮</button>
        
        <script type="text/javascript">
        	
			var time=new Date();
	


        	var img  =["img/p1.jpg","img/p2.jpg"];
        	var i=0;
        	function reg(){
        		document.getElementById("calss").src = img[i];
        		if(i == 0){
        	
        			i = 1;
        			var a = time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"号"+
		            time.getHours()+"时"+time.getMinutes()+"分"+time.getSeconds()+"秒";
        			document.getElementById("push").innerHTML="开";
        			document.getElementById("liss").innerHTML = a +":灯灭啦";
        			
        		}else{
        			i=0;
        			var a = time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"号"+
		            time.getHours()+"时"+time.getMinutes()+"分"+time.getSeconds()+"秒";
        			document.getElementById("push").innerHTML="关";
        			document.getElementById("liss").innerHTML = a +":灯亮啦";
        		}
        	}
        </script>
		
		
	</body>
</html>

标题 代码按钮点击实现效果

在这里插入图片描述

在这里插入图片描述

[ ?? ]
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
开关灯效果HTML,JS实现灯泡开关特效
weixin_42315569的博客
06-03 1239
JS实现灯泡开关特效的具体代码，供大家参考，具体内容如下并且显示时间，文字首先准备两张图片：开灯ON.jpg：关灯OFF.jpg效果图：下面是具体实现代码：HTML：开关灯特效时间：默认关灯开灯关灯 CSS：body {color: #333;background-color: #000;margin: 16px 10%;}p {color: #fff;}a {color: #FFFF00;tex...
js小练习(开关灯和不断闪烁)
qq_52273262的博客
10-09 532
其实开关灯就是两张图片的切换，所以只需要改换原来的img的src属性就行。html界面,简单一点，就放两个按钮和图片。用onlick属性来执行点击事件。
JavaScript 开关灯泡
chaichai_0810的博客
05-09 642
实现:点击按钮让图片关灯变为开灯，循环点击则同步更新状态。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点灯开关</title> </head> <body> <!-- 设置点击事件 --> <input type="button" value="开/关灯" onclick="c...
JavaScript实现简单页面开关灯效果
weixin_69761220的博客
07-05 1373
页面开关灯效果
JavaScript实现开关灯效果
爱酷码的博客
12-29 1334
题目默认是关灯图片，鼠标移动到图片上变成亮灯图片，鼠标离开变回关灯图片。在做成点击图片也可以切换图片 移动开关效果代码 <body> <div align="center"><img src="cankao/bulb_off.png" width="300px" onmouseover="onbulb()" onmouseout="offbulb()"></div><br/> </body> <script&g.
简单的JavaScript实现开灯关灯效果 ↑_↑
NCITS的专栏
05-05 9234
近期做网页设计作业，感觉各种视频网站上的关灯效果很人性化，所以简易的用JavaScript写了一个   附上全部代码          无标题文档 #choose{  margin:200px 200px; } .daytime{  background: #0D0D0D; } .nigth{  background: #FFF; }
js实现开关灯泡
f875221024的博客
10-13 553
js点击事件实现的一个小功能小功能先看一下新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 小功能先看一下 新的...
jQuery+CSS3黑夜开灯关灯动画特效.zip
最新发布
09-22
《jQuery+CSS3实现黑夜开灯关灯动画特效详解》 在网页设计中，动态效果是提升用户体验的重要手段。本文将深入探讨如何利用jQuery和CSS3实现一款极具创意的“黑夜开灯关灯”动画特效，该效果可以为网页增添独特的...
jQuery+CSS3开关灯动画特效代码
03-20
而"jiaoben6567"可能是源代码文件，包含了实现开关灯动画特效的具体HTML、CSS和JavaScript代码。 总之，jQuery+CSS3开关灯动画特效代码是一种巧妙结合了前端技术的交互设计，它不仅可以增强网页的视觉吸引力，还能...
jQuery点击开关按钮视频网站背景开灯关灯代码
06-10
4. **JavaScript 动画**：`js` 文件通常包含处理灯光开关逻辑的JavaScript代码。jQuery的`.fadeIn()` 和 `.fadeOut()` 方法可以平滑地改变元素的不透明度，模拟灯光渐亮和渐暗的效果。例如，`$("body").fadeTo(500, ...
HTML5关灯效果_关灯小游戏.rar
07-10
HTML5实现的关灯小游戏,请按下面开始按钮开始游戏,每关只能重置一次.本游戏由49盏灯所组成，共有两种状态,灯开的状态为黄色，关的状态为黑色，当按开始游戏按钮时，会模拟点亮一些灯当你把所有黄色的灯点为黑色，就可以进行下一关。下面是游戏操作过程： 　　如图所示，当你按下最角上那个时，会出现如上图所示的亮灯状态，按下边上的时，看不到的地方不亮灯，其他的地方是以十字的形式完成，按灯时与他相关的都会变为与按之前相反的状态。
网页开灯关灯的应用
08-10
kaiguan.html，开灯关灯的简单应用，影视播放希望用得到哦。
关灯小游戏
12-13
关灯小游戏，无代码加密，
Allofthelights.js 网页开关灯特效代码
05-18
摘要:脚本资源,Ajax/JavaScript,开灯关灯特效,开关灯特效　　Allofthelights.js是一款专门用于网页上的开关灯特效插件，开关灯特效代码，点击关灯、点击开灯的效果，见到好多视频网站都有这种效果，关灯以后，只有视频窗口是下正常显示的，网页的其它部分都是黑的或不能看清楚，类似于把灯关了黑呼呼一片的效果，再次点击按钮则可开灯，网页内容就全部显示出来了。如果您需要这种开灯、关灯的效果，这个代码相必会很不错。
jquery视频网站背景关灯开灯效果代码
11-02
jquery视频网站背景关灯开灯效果代码 jquery视频网站背景关灯开灯效果代码
JavaScript中开关灯案例展示
m0_71345904的博客
06-27 1761
今天讲一个开关灯的案例，这里逻辑思维重点在于打标记法。代码展示，需求：点击关灯按钮，页面颜色变成黑色，同时按钮的关灯变成开灯，再次点击页面会变成黄色，按钮又变回关灯，可以自定义去设置； 在html中添加一个按钮标签（button）。因为需求是通过点击按钮来实现页面的颜色改变，所以首先获取这两个事件源body元素较特殊，直接用document.body就可以获取到获取完，给按钮添加点击事件属性（onclick）重难点是我们每次点完他需要切换效果，而不是保留上一个触发事件，所以可以用标记法，来做一个if判断
JS小实战1-开关灯效果
ssup的博客
01-01 1597
开灯的效果: 关灯的效果: 实现思路和功能: 1.默认页面是白色的(开灯状态),按钮显示的文字是关灯 2.点击按钮 1)获取当前开关灯状态(看body的背景颜色) 2)如果当前是开灯状态(body的背景颜色是白色),我们让body的背景颜色变为黑色(关灯状态),按钮中显示开灯 3)如果当前是关灯状态(body的背景颜色是黑色),我们让body的背景颜色变为白色(开灯状态),按钮中显示关灯 代码实现: <head> <style> ...
点击开关按钮，js实现电灯开关效果
qq_53983648的博客
11-22 6016
js实现开关灯效果
前端小练习JS实现网页开灯和关灯
weixin_51983027的博客
11-30 1343
思路：首先是获取开关灯按钮元素和body元素，然后写事件就是当用户点击关灯按钮后页面颜色由白色变为黑色，按钮的背景色变为白色，按钮由关灯字样变为开灯字样，然后再点击按钮，又由开灯变为关灯，页面背景色变为白色。基于javascript，css，html实现的一个简单好用的关灯开灯小案例
int main(void) { delay_init(); //延时函数初始化 NVIC_Configuration();//设置NVIC中断分组2:2位抢占优先级，2位响应优先级 LED_Init(); //初始化与LED连接的硬件接xBF uart_init(9600); TIM3_Int_Init(499,7199);//10Khz的计数频率，计数到500为50ms i=50; while(i--) delay_ms(100); printf("AT+CIPMUX=1\r\n"); //允许链接 i=10; while(i--) delay_ms(100); printf("AT+CIPSERVR=1,8080\r\n"); //创建端口号8080 while(1) { if(ReadFlag== 1) //读取串口数据标志 { Count=0; //传授接收变量清零 UartBusy=0; ReadFlag=0; //读取标识清零 if((strstr((const char *)BufTab,"OPEN1")!=NULL)||(strstr((const char * )BufTab,"LED1-3")!=NULL)) //接收到LPEN1 LED1-3 { PWML_LED1=10;rebackFalg=1;//设置pwm 发送标志置位 } else if(strstr((const char * )BufTab,(const char * )"CLOSE1")!=NULL) //接收到CLOSE1 { PWML_LED1=0;rebackFalg=1;//设置pwm 发送标志置位 } else if((strstr((const char *)BufTab,"OPEN2")!=NULL)||(strstr((const char *)BufTab,"LED2-3")!=NULL)) //接收到 OPEN2 { PWML_LED2=10;rebackFalg=1;//设置pwm 发送标志置位 } else if(strstr((const char *)BufTab,"LLOSE2")!=NULL) //接收到LLOSE2 { PWML_LED2=0;rebackFalg=1;//设置pwm 发送标志置位 } } else if(strstr((const char *)BufTab,"OPENALL")!=NULL) //接收OENALL { PWML_LED1=10;PWML_LED2=10;rebackFalg=1; //设置pwm 发送标志置位 } else if(strstr((const char *)BufTab,"CLOSEALL")!=NULL) //接收到CLOSEALL { PWML_LED1=0;PWML_LED2=0; rebackFalg=1; } for(i=0;i<10;i++) //清空wifi数据数组 { BufTab[i]='0'; } if((sendDataFlag == 1)&&(rebackFalg != 0))//接收到数后返回ok { if(MesCount == 0) //发送信息计数 { MesCount =1; printf("AT+CIPSEND=0,2\r\n"); //发送固定字节数据的at命令 } else { if(rebackFalg ==1) //返回标志置位 {printf("OK");} //发送ok MesCount = 0; //发送信息计数 rebackFalg = 0; } sendDataFlag = 0; //定时发送数据清空 } led1Count++; //led 对比pwm值计数 led2Count++; //led 对比pwm值计数 if(led1Count<PWML_LED1) //led1 PWM对比 { LED1=1; //开灯 } else if((led1Count>=PWML_LED1)&&(led1Count<=10)) //led1 PWM对比 { LED1=0; //关灯 } else { led1Count=0; //一个周期结束 } if(led2Count<PWML_LED2) //led2 PWM对比 { LED2=1; //开灯 } else if((led2Count>=PWML_LED2)&&(led2Count<=10)) //led2 PWM对比 { LED2=0; //关灯 } else { led2Count=0; //一个周期结束 } } } 请在此代码上，添加代码，使得LED1和LED2的闪烁频率能够实现三个等级的亮度变化，
06-12
可以在代码中添加一个变量来控制 LED 的亮度等级，然后根据不同的亮度等级设置不同的 PWM 值来实现 LED 的亮度变化。 具体代码实现如下： ```c int main(void) { int brightness_level = 1; // 亮度等级，初始值为1 delay_init(); NVIC_Configuration(); LED_Init(); uart_init(9600); TIM3_Int_Init(499,7199); i = 50; while(i--) delay_ms(100); printf("AT+CIPMUX=1\r\n"); i = 10; while(i--) delay_ms(100); printf("AT+CIPSERVR=1,8080\r\n"); while(1) { if(ReadFlag == 1) { Count = 0; UartBusy = 0; ReadFlag = 0; if((strstr((const char *)BufTab,"OPEN1")!=NULL)||(strstr((const char * )BufTab,"LED1-3")!=NULL)) { brightness_level = 1; // 设置亮度等级为1 rebackFalg=1; } else if(strstr((const char * )BufTab,(const char * )"CLOSE1")!=NULL) { brightness_level = 0; // 设置亮度等级为0 rebackFalg=1; } else if((strstr((const char *)BufTab,"OPEN2")!=NULL)||(strstr((const char *)BufTab,"LED2-3")!=NULL)) { brightness_level = 2; // 设置亮度等级为2 rebackFalg=1; } else if(strstr((const char *)BufTab,"LLOSE2")!=NULL) { brightness_level = 0; // 设置亮度等级为0 rebackFalg=1; } } else if(strstr((const char *)BufTab,"OPENALL")!=NULL) { brightness_level = 3; // 设置亮度等级为3 rebackFalg=1; } else if(strstr((const char *)BufTab,"CLOSEALL")!=NULL) { brightness_level = 0; // 设置亮度等级为0 rebackFalg=1; } for(i = 0; i < 10; i++) { BufTab[i] = '0'; } if((sendDataFlag == 1)&&(rebackFalg != 0)) { if(MesCount == 0) { MesCount = 1; printf("AT+CIPSEND=0,2\r\n"); } else { if(rebackFalg == 1) { printf("OK"); } MesCount = 0; rebackFalg = 0; } sendDataFlag = 0; } led1Count++; led2Count++; if(led1Count < (10 * brightness_level / 3)) { // 根据亮度等级设置 PWM 值 LED1 = 1; } else if((led1Count >= (10 * brightness_level / 3)) && (led1Count <= 10)) { LED1 = 0; } else { led1Count = 0; } if(led2Count < (10 * brightness_level / 3)) { LED2 = 1; } else if((led2Count >= (10 * brightness_level / 3)) && (led2Count <= 10)) { LED2 = 0; } else { led2Count = 0; } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值