射流研究…实现灯泡开关特效的具体代码，供大家参考，具体内容如下

并且显示时间，文字

首先准备两张图片：开灯ON.jpg:关灯OFF.jpg

效果图：

下面是具体实现代码：

HTML:

！DOCTYPE html html head meta charset=' utf-8 '/title开关灯特效/title link href=' CSS/bulb。CSS ' rel='样式表type=' text/CSS '/script src=' http : js/bulb。js '/脚本/头体div align=' center ' p时间：/p p id='show'/p p id='def '默认关灯/p /div div align=中心ul阿利href=' img/on。jpg ' style=' width : 500 px'高度： 500像素标题='灯亮了onclick=' show bulb(这个)；返回假的开灯/a /li阿利高度： 500像素标题='灯灭了onclick=' show bulb(这个)；返回假的关灯/a/Li/ul img id=' IMgbulb ' src=' http : img/off。jpg ' width=' 500 px ' height=' 500 px '/div/body/HTMlCSS:

车身{ color: # 333背景色： # 000;保证金： 16px 10%；} p { color : # fff } a { color : # FFFF00文本装饰：无；} ul { padding: 0px } li {左侧浮动：填充-top : 9px；左填充left: 960pxlist-style:无；}JS:

函数显示灯泡(分配){ var aimg=分配。GetAttribute(' href ')；//通过获取指定标签属性的值获取href var imgBulb=document。getelementbyid(' IMgbulb ')；//获取img/里面ID imgBulb.setAttribute('src '，aimg)；//将科学研究委员会路径图片修改为目标路径： var aimg show time()；//时间var text=assign。GetAttribute(' title ')；//通过获取指定标签属性的值获取title var def=文档。getelementbyid(' def ')；净化第一个孩子。节点值=文本；//返回当前节点的第一个子节点文本节点}函数show time(){ var show=document。getelementbyid(' show ')；var新日期=新日期()；展示。innerhtml=新日期。ToLocalString()；//根据本地时间格式把日期对象转换为字符串显示出来}这里我给大家准备了两张图，大家可以拿去用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。