欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)燈泡開關(guān)特效

 更新時(shí)間：2020年03月30日 15:10:22   作者：Chaz Chaim  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)燈泡開關(guān)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS實(shí)現(xiàn)燈泡開關(guān)特效的具體代碼，供大家參考，具體內(nèi)容如下

并且顯示時(shí)間，文字

首先準(zhǔn)備兩張圖片：開燈ON.jpg：關(guān)燈OFF.jpg

效果圖：

下面是具體實(shí)現(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>時(shí)間：</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(); //時(shí)間
 var text = assign.getAttribute("title"); //通過getAttribute獲取title
 var def = document.getElementById("def");
 def.firstChild.nodeValue = text; //返回當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)文本節(jié)點(diǎn)

}

function showTime() {
 var show = document.getElementById("show");
 var newDate = new Date();
 show.innerHTML = newDate.toLocaleString(); //根據(jù)本地時(shí)間格式把Date對(duì)象轉(zhuǎn)換為字符串顯示出來
}

這里我給大家準(zhǔn)備了兩張圖，大家可以拿去用

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論