用js控制電燈開關

Posted on by

利用js控制電燈開關，供大傢參考，具體內容如下

題目：

通過js來控制電燈的開關

分析：

獲取電燈泡元素，給它綁定點擊事件，通過鼠標點擊來實現電燈泡的開關

實現方法：

方法一：

獲取圖片元素，通過給按鈕綁定點擊事件來控制電燈開關

<!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>電燈開關案例</title>
</head>
<body>
    <img src="./img/關.gif" alt="">
    <button id="open">開燈</button>
    <button id="close">關燈</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/關.gif"
    }
</script>
</html>

總結：這種方式比較簡單，也不容易出錯，通過按鈕綁定，直接獲取對應的電燈開關圖片

運行結果：

相關方法：

  • document.getElementById():通過id名獲取對應的元素,
  • document.getElementsByTagName():通過元素名獲取對應的元素，獲取出來的是一個類數組對象
  • onclick：單擊事件，通過鼠標點擊觸發

方法二：

獲取圖片元素，直接給圖片綁定開關事件

<!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>電燈開關案例</title>
</head>
<body>
    <img src="./img/關.gif" alt="">
</body>
<script>
    var img=document.getElementsByTagName("img")[0];
    var flag=false;
    img.onclick=function(){
        if(flag){
            img.src="./img/關.gif";
            flag=false;
        }else{
            img.src="./img/開.gif";
            flag=true;
        }
    }
</script>
</html>

註意：這種方法需要先做一個標記（flag）來判斷電燈初始的狀態，直接給圖片綁定點擊事件的時候，需要註意標記（flag）的初始賦值為false。

運行結果：點擊電燈泡時，電燈明暗依次交替

相關圖片：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：

    None Found