用js控制電燈開關(guān)

更新時(shí)間：2021年04月22日 15:08:25 作者：小蘇(º﹃º )

這篇文章主要為大家詳細(xì)介紹了用js控制電燈開關(guān)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用js控制電燈開關(guān)，供大家參考，具體內(nèi)容如下

題目：

通過js來控制電燈的開關(guān)

分析：

獲取電燈泡元素，給它綁定點(diǎn)擊事件，通過鼠標(biāo)點(diǎn)擊來實(shí)現(xiàn)電燈泡的開關(guān)

實(shí)現(xiàn)方法：

方法一：

獲取圖片元素，通過給按鈕綁定點(diǎn)擊事件來控制電燈開關(guān)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電燈開關(guān)案例</title>
</head>
<body>
    <img src="./img/關(guān).gif" alt="">
    <button id="open">開燈</button>
    <button id="close">關(guān)燈</button>
</body>
<script>
    var open=document.getElementById("open");
    var close=document.getElementById("close");
    var img=document.getElementsByTagName("img")[0];
    open.onclick=function(){
        img.src="./img/開.gif"
    }
    close.onclick=function(){
        img.src="./img/關(guān).gif"
    }
</script>
</html>

總結(jié)：這種方式比較簡單，也不容易出錯(cuò)，通過按鈕綁定，直接獲取對應(yīng)的電燈開關(guān)圖片

運(yùn)行結(jié)果：

相關(guān)方法：

document.getElementById():通過id名獲取對應(yīng)的元素,
document.getElementsByTagName():通過元素名獲取對應(yīng)的元素，獲取出來的是一個(gè)類數(shù)組對象
onclick：單擊事件，通過鼠標(biāo)點(diǎn)擊觸發(fā)

方法二：

獲取圖片元素，直接給圖片綁定開關(guān)事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電燈開關(guān)案例</title>
</head>
<body>
    <img src="./img/關(guān).gif" alt="">
</body>
<script>
    var img=document.getElementsByTagName("img")[0];
    var flag=false;
    img.onclick=function(){
        if(flag){
            img.src="./img/關(guān).gif";
            flag=false;
        }else{
            img.src="./img/開.gif";
            flag=true;
        }
    }
</script>
</html>

注意：這種方法需要先做一個(gè)標(biāo)記（flag）來判斷電燈初始的狀態(tài)，直接給圖片綁定點(diǎn)擊事件的時(shí)候，需要注意標(biāo)記（flag）的初始賦值為false。

運(yùn)行結(jié)果：點(diǎn)擊電燈泡時(shí)，電燈明暗依次交替

相關(guān)圖片：