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