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

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

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的普安網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

并且顯示時間，文字

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

效果圖：

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

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

下面是具體實(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>時間：</p>
 <p id="show"></p>
 <p id="def">默認(rèn)關(guān)燈</p>
 </div>
 <div align="center">
 <ul>
 <li>
 <a href="img/ON.jpg"  title="燈亮了" onclick="showBulb(this); return false;">開燈</a>
 </li>
 <li>
 <a href="img/OFF.jpg"  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é)點(diǎn)的第一個子節(jié)點(diǎn)文本節(jié)點(diǎn)

}

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

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：JS實(shí)現(xiàn)燈泡開關(guān)特效
分享地址：http://bm7419.com/article22/jcepjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、定制開發(fā)、、手機(jī)網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名