编程 Javascript

JS实现灯泡开关特效

Posted in Javascript onMarch 30, 2020

JS实现灯泡开关特效的具体代码，供大家参考，具体内容如下

并且显示时间，文字

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

效果图：

JS实现灯泡开关特效

下面是具体实现代码：

HTML：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>开关灯特效</title>
 <link href="css/bulb.css" rel="stylesheet" type="text/css" />
 <script src="js/bulb.js"></script>
 </head>
 <body>
 <div align="center">
 <p>时间：</p>
 <p id="show"></p>
 <p id="def">默认关灯</p>
 </div>
 <div align="center">
 <ul>
 <li>
 <a href="img/ON.jpg" style="width: 500px;height: 500px;" title="灯亮了" onclick="showBulb(this); return false;">开灯</a>
 </li>
 <li>
 <a href="img/OFF.jpg" style="width: 500px;height: 500px;" title="灯灭了" onclick="showBulb(this); return false;">关灯</a>
 </li>
 </ul>
 <img id="imgBulb" src="img/OFF.jpg" width="500px" height="500px" />
 </div>
 </body>
</html>

CSS：

body {
 color: #333;
 background-color: #000;
 margin: 16px 10%;
}

p {
 color: #fff;
}

a {
 color: #FFFF00;
 text-decoration: none;
}

ul {
 padding: 0px;
}

li {
 float: left;
 padding-top: 9px;
 padding-left: 960px;
 list-style: none;
}

JS：

function showBulb(assign) {
 var aimg = assign.getAttribute("href"); //通过getAttribute获取href
 var imgBulb = document.getElementById("imgBulb"); //获取<img/>里面ID
 imgBulb.setAttribute("src", aimg); //将src路径图片修改为目标路径:var aimg
 showTime(); //时间
 var text = assign.getAttribute("title"); //通过getAttribute获取title
 var def = document.getElementById("def");
 def.firstChild.nodeValue = text; //返回当前节点的第一个子节点文本节点

}

function showTime() {
 var show = document.getElementById("show");
 var newDate = new Date();
 show.innerHTML = newDate.toLocaleString(); //根据本地时间格式把Date对象转换为字符串显示出来
}

这里我给大家准备了两张图，大家可以拿去用

JS实现灯泡开关特效

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

JS实现灯泡开关特效

- Author -

Chaz Chaim

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 弹出框替代浏览器的弹出框

Oct 29 Javascript

AngularJS转换响应内容

Jan 27 Javascript

jquery分隔Url的param方法(推荐)

May 25 Javascript

JQuery手速测试小游戏实现思路详解

Sep 20 Javascript

jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

Sep 23 Javascript

[原创]javascript typeof id==='string'?document.getElementById(id):id解释

Nov 02 Javascript

node.js Sequelize实现单实例字段或批量自增、自减

Dec 08 Javascript

ES6中参数的默认值语法介绍

May 03 Javascript

总结javascript三元运算符知识点

Sep 28 Javascript

Vue slot用法(小结)

Oct 22 Javascript

微信小程序连接服务器展示MQTT数据信息的实现

Jul 14 Javascript

详解javascript脚本何时会被执行

Feb 05 Javascript

浅谈微信小程序列表埋点曝光指南

Oct 15 #Javascript

javascript网页随机点名实现过程解析

Oct 15 #Javascript

javascript随机变色实例代码

Oct 15 #Javascript

vue中axios的二次封装实例讲解

Oct 14 #Javascript

Vue项目打包部署到iis服务器的配置方法

Oct 14 #Javascript

浅析微信小程序modal弹窗关闭默认会执行cancel问题

Oct 14 #Javascript

vue实现百度语音合成的实例讲解

Oct 14 #Javascript