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.intensediesel.com/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.intensediesel.com/bcjs/imgs/on.gif';//修改圖片}function f2() {//關(guān) let bt2=document.getElementById('bt2'); let img=document.getElementById('img'); img.src='http://www.intensediesel.com/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.intensediesel.com/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.intensediesel.com/bcjs/imgs/off.gif' flag=false; }else { img.src='http://www.intensediesel.com/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.intensediesel.com/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. Xml簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理2. UDDI FAQs3. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案4. ASP常用日期格式化函數(shù) FormatDate()5. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法6. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享7. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能8. jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲9. jsp文件下載功能實(shí)現(xiàn)代碼10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
網(wǎng)公網(wǎng)安備