JavaScript實(shí)現(xiàn)的開(kāi)關(guān)燈泡點(diǎn)擊切換特效示例
更新時(shí)間：2019年07月08日 11:11:46 作者：webbc
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的開(kāi)關(guān)燈泡點(diǎn)擊切換特效,涉及javascript事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)的開(kāi)關(guān)燈泡點(diǎn)擊切換特效。分享給大家供大家參考，具體如下：
準(zhǔn)備
首先要準(zhǔn)備兩張圖片，一張是燈泡亮的圖片，取名為on.jpg，另一張是滅的圖片，取名為off.jpg，都放置到當(dāng)前的目錄下。
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script>
function change(){
var img = document.getElementById('img');
var src = img.src;
if(src.indexOf('on') >=0 ){
img.src = 'off.jpg';
}else{
img.src = 'on.jpg';
}
}
</script>
</head>
<body>
<h1>開(kāi)關(guān)燈泡</h1>
<img id='img' src="on.jpg" onclick="change();" width='200' height="200">
</body>
</html>
運(yùn)行結(jié)果圖
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了一波JavaScript日期判斷腳本分享,包括計(jì)算日期是否在時(shí)間段內(nèi)即閏年的判斷等,需要的朋友可以參考下2016-03-03
一個(gè)兼容FF的智能超長(zhǎng)文章分頁(yè)JS
這篇文章主要介紹了一個(gè)兼容FF的智能超長(zhǎng)文章分頁(yè)JS的相關(guān)資料,需要的朋友可以參考下2007-07-07
這篇文章主要介紹了js簡(jiǎn)單判斷flash是否加載完成的方法,通過(guò)PercentLoaded方法對(duì)flash的加載進(jìn)行判斷,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
js監(jiān)聽(tīng)鍵盤事件的方法_原生和jquery的區(qū)別詳解
下面小編就為大家?guī)?lái)一篇js監(jiān)聽(tīng)鍵盤事件的方法_原生和jquery的區(qū)別詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量，缺點(diǎn)是它占用了函數(shù)的返回值。2011-01-01
本文主要給大家介紹的是javascript中的擴(kuò)展方法字符串trim()的使用指南，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序radio組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了微信小程序checkbox組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript中輕松獲取頁(yè)面參數(shù)值的N種方法(含代碼示例)
本文旨在深入淺出地揭示如何在JavaScript中巧妙提取那些隱藏在URL背后的寶貴信息,從基礎(chǔ)方法到高級(jí)技巧,一網(wǎng)打盡,無(wú)論你是編程界的菜鳥(niǎo)還是久經(jīng)沙場(chǎng)的老將,這里都有值得你品鑒的“珍饈”,需要的朋友可以參考下2024-06-06
這篇文章主要給大家介紹了關(guān)于前端圖片壓縮常見(jiàn)的一些解決辦法,圖片上傳是前端中常見(jiàn)的的業(yè)務(wù)場(chǎng)景,無(wú)論是前臺(tái)還是后臺(tái),適當(dāng)?shù)膶?duì)圖片進(jìn)行壓縮處理,可以顯著的提升用戶體驗(yàn),需要的朋友可以參考下2023-11-11