JavaScript實(shí)現(xiàn)的開關(guān)燈泡點(diǎn)擊切換特效示例
更新時(shí)間：2019年07月08日 11:11:46 作者：webbc
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的開關(guān)燈泡點(diǎn)擊切換特效,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)的開關(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>開關(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é)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)詳情頁放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
js調(diào)用圖片隱藏&顯示實(shí)現(xiàn)代碼
圖片隱藏&顯示效果，會(huì)在很多地方看到，本文使用js實(shí)現(xiàn)下，個(gè)人感覺還不錯(cuò)，有需要的朋友不妨參考下2013-09-09
JS實(shí)現(xiàn)的用來對比兩個(gè)用指定分隔符分割的字符串是否相同
這篇文章主要介紹了JS實(shí)現(xiàn)的用來對比兩個(gè)用指定分隔符分割的字符串是否相同,本文代碼為特殊需要而寫,需要的朋友可以參考下
2014-09-09 
layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法
今天小編就為大家分享一篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09 
今天凌晨，微信負(fù)責(zé)人張小龍?jiān)谖⑿排笥讶癯隽艘唤M圖，網(wǎng)友看到紛紛“炸裂”，這到底是什么？是的，微信小程序如約上線，微信小程序怎么打開，微信小程序在哪里進(jìn)入，請閱讀本文
2017-01-01 
JS實(shí)現(xiàn)獲取本月的開始時(shí)間與結(jié)束時(shí)間
在JavaScript中,可以使用Date對象來獲取本月的開始時(shí)間和結(jié)束時(shí)間,本文通過代碼示例詳細(xì)的給大家介紹了JS獲取本月的開始時(shí)間與結(jié)束時(shí)間,感興趣的小伙伴跟著小編一起來看看吧
2023-08-08 
使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼
這篇文章主要介紹了使用JS和canvas實(shí)現(xiàn)gif動(dòng)圖的停止和播放代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09 
showModelessDialog()使用詳解...
2006-09-09 
JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作示例【測試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作,涉及javascript簡單json數(shù)組遍歷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12