用js控制電燈開關

利用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。