JS实现灯泡开关特效

 更新时间:2020年03月30日 15:10:22   作者:Chaz Chaim  
这篇文章主要为大家详细介绍了JS实现灯泡开关特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

并且显示时间,文字

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

效果图:

下面是具体实现代码:

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 Calender日历控件

    一起学写js Calender日历控件

    这篇文章主要和大家一起学写js Calender控件,自己动手编写了一个简易日历控件,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 概述一个页面从输入URL到页面加载完的过程

    概述一个页面从输入URL到页面加载完的过程

    本文主要对一个页面从输入 URL 到页面加载完的过程中都发生了什么事情进行概述,对我们学习网络语言有一定的帮助,下面就跟小编一起来看下吧
    2016-12-12
  • javascript中活灵活现的Array对象详解

    javascript中活灵活现的Array对象详解

    本文的内容就如同标题一样,这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用。相信对大家学习或者理解javascript中的Array对象能具有一定的参考借鉴价值,有需要的朋友们下面跟着小编一起来学习学习吧。
    2016-11-11
  • Javascript实现页面滚动时导航智能定位

    Javascript实现页面滚动时导航智能定位

    本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 用原生js统计文本行数的简单示例

    用原生js统计文本行数的简单示例

    这篇文章我们来看看如何利用原生的JavaScript实现统计文本的行数,代码实现起来很简单,有需要的可以参考借鉴。
    2016-08-08
  • 详细分析jsonp的原理和实现方式

    详细分析jsonp的原理和实现方式

    给大家图文详细分析一下jsonp的原理以及跨域问题的汇总。
    2017-11-11
  • 微信小程序页面上下滚动效果

    微信小程序页面上下滚动效果

    这篇文章主要为大家详细介绍了微信小程序页面上下滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • javascript抽象工厂模式详细说明

    javascript抽象工厂模式详细说明

    这篇文章主要介绍了javascript抽象工厂模式详细说明,需要的朋友可以参考下
    2014-12-12
  • js控制台输出的方法(详解)

    js控制台输出的方法(详解)

    下面小编就为大家带来一篇js控制台输出的方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • Three.js实现绘制字体模型示例代码

    Three.js实现绘制字体模型示例代码

    最近在学习three.js,这篇文章属于系列文章,下面这篇文章主要给大家介绍了关于Three.js如何绘制字体模型的相关资料,通过文中介绍的方法实现的效果非常的赞,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09

最新评论