JS实现灯泡开关特效


Posted in Javascript onMarch 30, 2020

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

并且显示时间,文字

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

效果图:

JS实现灯泡开关特效

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实现灯泡开关特效

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

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 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
You might like
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
Javascript的并行运算实现代码
2010/11/19 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
Python中的闭包总结
2014/09/18 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
求职推荐信
2013/10/28 职场文书
护理专业自荐信范文
2014/02/26 职场文书
致共产党员倡议书
2014/04/16 职场文书
重阳节标语大全
2014/10/07 职场文书
让子弹飞观后感
2015/06/11 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Go语言编译原理之变量捕获
2022/08/05 Golang