##JavaScript灯泡开关

news/2024/11/7 20:56:19/

JavaScript–灯泡开关可以点击开关按钮,灯泡亮或关闭,旁边有显示的灯泡亮或关闭的时间

这是点击后的效果(图片是自己P的,有点难看,不要见怪)
在这里插入图片描述
下面是代码展示:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>灯泡开关</title><style>#div1{width: 500px;height: 500px;float: left;}#bulb1{width: 400px;height: 400px;}#div2{float: right;margin-right: 200px;}</style></head><body><div id="div1"><img src="img/bulb1.png" id="bulb1"/></div><div id="div2"></div><div><input type="button" value="开关" id="btn" onclick="getStr()"></div><script>var flag = true;function getStr(){var bulb = document.getElementById("bulb1");if(flag){bulb.src = "img/bulb2.png";document.getElementById("div2").innerHTML = date()+"灯开了";flag = false;}else{bulb.src = "img/bulb1.png";document.getElementById("div2").innerHTML = date()+"灯关了";flag = true;}}/*** 本地时间方法*/function date(){var strTime = new Date();var year = strTime.getFullYear();var month = strTime.getMonth()+1;var date = strTime.getDate();var hour = strTime.getHours();var minute = strTime.getMinutes();var miao = strTime.getSeconds();var time = year +"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+miao+"秒";//必须由返回值,才能显示时间return time;}</script></body>
</html>

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

相关文章

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、光源上的不同 其实单从造型来看,其实对于新手…

IIS实现http跳转https的重定向方法

整体流程为&#xff1a; 1、安装SSL证书&#xff1b;2、下载安装URL Rewrite模块&#xff1b;3、配置“URL重写”规则&#xff0c;或者修改web.config配置文件。 一、安装部署证书 首先安装SSL证书。 二、安装URL ReWrite扩展 URL ReWrite扩展下载地址https://www.iis.net/…

QML加载QIcon,或从主题及文件加载图标

文章目录 前言继承QQuickPaintedItem设置icon属性绘制图标注册到QML系统在QML中加载QIconImage模块使用QIconImage核心代码实现前言 最近使用QML加载QIcon 发现在QML中不能直接使用QIcon类,常见的比如在Button中设置icon属性为QIcon类会提示Unable to assign QIcon to QQuic…

得推二手商城系统类似咸鱼商城PHP商城系统源码 v1.2

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 得推二手商城系统是一个类似于咸鱼商城的PHP商城系统源码&#xff0c;包含了商城&#xff0c;圈子&#xff0c;回收&#xff0c;金币兑换&#xff0c;签到等多个模块&#xff0c;可以…

SAP MM模块之货源清单(转载)

货源清单是SAP采购管理里面的主数据&#xff0c;来决定采购员下采购单时候&#xff0c;能够选择的货源。 正常来说&#xff0c;我们向供应商询价之后&#xff0c;供应商将在规定的时间内给我们报价&#xff0c;如果供应商的价格合适&#xff0c;我们将认可这个报价&#xff0c…

SAP MM模块一些表

Material Master Data: MARA – General Data, material type MAKT– Short Texts, descriptions MARM– Conversion Factors MVKE – Sales Org, distribution channel MLAN – Sales data, tax indicator, tax MARC – classification MBEW – Plant Planning Data M…