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 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery构造函数init参数分析
May 13 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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将会员数据导入到ucenter的代码
2010/07/18 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
JS实现复制功能
2017/03/01 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python去除文件中重复的行实例
2018/06/29 Python
详解python读取和输出到txt
2019/03/29 Python
python实现PID算法及测试的例子
2019/08/08 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
优秀班组长事迹
2014/05/31 职场文书
增员口号大全
2014/06/18 职场文书
文艺晚会开场白
2015/05/29 职场文书
工作感言一句话
2015/08/01 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server
python 单机五子棋对战游戏
2022/04/28 Python