JS實現(xiàn)燈泡開關(guān)特效
更新時間：2020年03月30日 15:10:22 作者：Chaz Chaim
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)燈泡開關(guān)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS實現(xiàn)燈泡開關(guān)特效的具體代碼，供大家參考，具體內(nèi)容如下
并且顯示時間，文字
首先準(zhǔn)備兩張圖片：開燈ON.jpg：關(guān)燈OFF.jpg
效果圖：
下面是具體實現(xiàn)代碼：
HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>開關(guān)燈特效</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">默認(rèn)關(guān)燈</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;">關(guān)燈</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路徑圖片修改為目標(biāo)路徑:var aimg
showTime(); //時間
var text = assign.getAttribute("title"); //通過getAttribute獲取title
var def = document.getElementById("def");
def.firstChild.nodeValue = text; //返回當(dāng)前節(jié)點的第一個子節(jié)點文本節(jié)點
}
function showTime() {
var show = document.getElementById("show");
var newDate = new Date();
show.innerHTML = newDate.toLocaleString(); //根據(jù)本地時間格式把Date對象轉(zhuǎn)換為字符串顯示出來
}
這里我給大家準(zhǔn)備了兩張圖，大家可以拿去用
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
用JS寫一段判斷搜索引擎來路并且屏蔽PC的跳轉(zhuǎn)代碼
以下是用JS寫的判斷搜索引擎來路并屏蔽PC跳轉(zhuǎn)的代碼,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于uniapp中如何修改圖標(biāo)和名稱的相關(guān)資料,uni-app是一個使用Vue.js開發(fā)跨平臺應(yīng)用的前端框架,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
JavaScript實現(xiàn)元素滾動條到達一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實現(xiàn)元素滾動條到達一定位置循環(huán)追加內(nèi)容，具有很好的參考價值，希望對大家有所幫助2017-12-12
JS組件Bootstrap ContextMenu右鍵菜單使用方法
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap ContextMenu右鍵菜單使用方法，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了Javascript中的幾種URL編碼方法比較,本文對比了escape()、encodeURI()以及encodeURIComponent()這3種URL編碼方法,需要的朋友可以參考下2015-01-01
這ES6允許為函數(shù)參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義后面。下面篇文章主要介紹了ES6中參數(shù)默認(rèn)值語法的相關(guān)資料，對大家具有一定的參考價值，需要的朋友下面來一起看看吧。2017-05-05
event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別？event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對象的定位屬性值為relative2011-10-10
這篇文章主要幫助大家理解javascript中Map代替循環(huán)，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript合并兩個數(shù)組并去除重復(fù)項的方法
這篇文章主要介紹了JavaScript合并兩個數(shù)組并去除重復(fù)項的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06
解決JS內(nèi)存泄露之js對象和dom對象互相引用問題
這篇文章主要介紹了解決JS內(nèi)存泄露之js對象和dom對象互相引用問題,需要的朋友可以參考下2017-06-06