闪烁的灯泡

news/2024/11/7 18:49:18/

闪烁的灯泡

学习路线:JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡

简介:这是一个用来理解JS定时器函数的,小案例,制造一个可以闪烁的灯泡。

素材:

  • off.gif
    在这里插入图片描述
  • on.gif
    在这里插入图片描述
    演示代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript演示</title>
</head>
<body>
<!-- 
添加按钮,给按钮绑定事件 
开灯的按钮
-->
<input type="button" onclick="on()" value="开灯">  
<!-- 添加图片 -->
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<!-- 
添加按钮,给按钮绑定事件 
关灯的按钮
-->
<input type="button" onclick="off()" value="关灯"><script>// 设置开关灯的按钮function on(){document.getElementById('myImage').src='../imgs/on.gif'; // 通过id获取元素 设置点击事件}function off(){document.getElementById('myImage').src='../imgs/off.gif' // 通过id获取元素 设置点击事件}//定义一个变量,用来记录灯的状态,偶数是开灯状态,奇数是关灯状态var flag = 0;// 通过使用循环定时器,来达到让灯泡一闪一闪的,间隔时间为1ssetInterval(function (){if(flag % 2 == 0){//表示是偶数,开灯状态,调用 on() 函数on();}else {  //表示是奇数,关灯状态,调用 off() 函数off();}flag ++;//改变变量的值        },1000);</script>
</body>
</html>

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

相关文章

亮灯泡科技php,记科学小实验《灯泡亮了》

楼盘推广启动沙漏多米诺启动仪式激光船舵专业销售&#xff0c;庆典启动沙漏&#xff0c;开业活动沙漏&#xff0c;发布会多米诺启动仪式&#xff0c;诺骨牌由300个块骨牌组成&#xff0c;也就是说由300多幅画面 组成&#xff0c;一般制作时间要3-4天这样&#xff0c;多米诺启动…

js小灯泡

使用vsc写入 src" " ——其中输入图片的存放地址 方法1&#xff1a; <img id"light" src"D:/phpStudy/PHPTutorial/WWW/dengpao/p2.gif"><script> var lightdocument.getElementById("light") var f false light.oncli…

灯泡开关案例

1,获取按钮对象; 2,绑定事件:这里l两种方式:一种绑定图片,另一种绑定按钮开关; 3,定义一个标记变量,与图片的状态同步,这里是最重要的. <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"…

灯泡点亮效果

首先打一个div在给他一个类,然后我就复制 两个在改一下里面的类名。 之后css放两张不同灯泡的图片和下面的那个 灯丙设置他的宽度和高度用绝对定位或者是 用外边距为auto,移动到中间的这个位置, 在中间的类名加一个鼠标移入指针就会变成 小手的设置,第三个是加一个display…

##JavaScript灯泡开关

JavaScript–灯泡开关 这是点击后的效果(图片是自己P的&#xff0c;有点难看&#xff0c;不要见怪) 下面是代码展示&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title>灯泡开关</title><style>#d…

JAVAScript 灯泡(开关,图片转换)

方案一 单按钮&#xff08;开 / 关&#xff09; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewp…

服务器电源维修接灯泡,维修串接灯泡电路图

电磁炉串接灯泡法维修好的正确方法分享给大家 1、首先将电磁炉的电源串联一个灯泡(150W-200W最好200W)不放锅开机200W灯泡不亮,自检通过。 然后将电磁炉火候调到小档位后再放锅灯泡有规律的一亮一暗(注意亮度很高,且能够正常工作,会有加热的声音),拿走锅,灯泡即灭不亮不闪…

灯光设计中筒灯与射灯的使用

​筒灯射灯是家居灯光设计中经常会使用到的灯具,合理的搭配能使居住环境焕然一新,而且近年来无主灯的设计逐渐成为家居照明设计的主流,追求没有主灯的灯光照明设计,筒灯射灯被使用的频率便更高了。 一、筒灯与射灯的区别 1、光源上的不同 其实单从造型来看,其实对于新手…