js實(shí)現(xiàn)電燈開關(guān)效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)電燈開關(guān)效果的具體代碼，供大家參考，具體內(nèi)容如下
通過對js的一個(gè)學(xué)習(xí)，我們來完成一個(gè)模擬電燈開關(guān)的小案例。
首先對本案例進(jìn)行一個(gè)分析，過程如下：
1.獲取圖片屬性
2.綁定單擊事件
3.點(diǎn)擊時(shí)切換圖片
1.通過按鈕實(shí)現(xiàn)電燈開關(guān)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><img src='http://www.leifengta.com.cn/bcjs/imgs/on.gif' alt='' id='img'> <br><!--圖片--><input type='button' value='開' onclick='f1()'><!--按鈕--><button onclick='f2()'>關(guān)</button></body><script>function f1() {//開 let bt1=document.getElementById('bt1');//獲取按鈕id let img=document.getElementById('img');//獲取圖片id img.src='http://www.leifengta.com.cn/bcjs/imgs/on.gif';//修改圖片}function f2() {//關(guān) let bt2=document.getElementById('bt2'); let img=document.getElementById('img'); img.src='http://www.leifengta.com.cn/bcjs/imgs/off.gif';}</script></html>
運(yùn)行結(jié)果：
2.通過點(diǎn)擊電燈，實(shí)現(xiàn)開關(guān)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><img src='http://www.leifengta.com.cn/bcjs/imgs/off.gif' alt='' id='img'> <br></body><script> let img=document.getElementById('img'); img.onclick=f; let flag=false; function f() { if (flag==true){ img.src='http://www.leifengta.com.cn/bcjs/imgs/off.gif' flag=false; }else { img.src='http://www.leifengta.com.cn/bcjs/imgs/on.gif' flag=true; } }</script></html>
簡化版（利用三元運(yùn)算符）
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><img src='http://www.leifengta.com.cn/bcjs/imgs/on.gif' onclick='f()'></body><script> let img = document.getElementById('img'); let i=0; function f() { img.src=’imgs/’+(++i%2==0?’off’:’on’)+’.gif’; }</script></html>
運(yùn)行結(jié)果
通過點(diǎn)擊實(shí)現(xiàn)電燈的開關(guān)
電燈素材：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Android table布局開發(fā)實(shí)現(xiàn)簡單計(jì)算器2. 理解PHP5中static和const關(guān)鍵字3. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼4. php模擬實(shí)現(xiàn)斗地主發(fā)牌5. IntelliJ IDEA安裝插件的方法步驟6. phpstorm恢復(fù)默認(rèn)設(shè)置的方法步驟7. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)8. Python random庫使用方法及異常處理方案9. Vuex localStorage的具體使用10. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟
網(wǎng)公網(wǎng)安備