以下是一個簡單的JavaScript按鈕開關燈案例:
HTML代碼:
< button id="switch" >開關燈< /button >
< p id="status" >當前狀態:熄滅< /p >
JavaScript代碼:
let status = "熄滅";
const switchButton = document.getElementById("switch");
const statusDisplay = document.getElementById("status");
switchButton.addEventListener("click", function() {
if (status === "熄滅") {
status = "亮起";
switchButton.innerHTML = "開關燈";
statusDisplay.innerHTML = "當前狀態:" + status;
// 在這里添加點亮燈的代碼
} else {
status = "熄滅";
switchButton.innerHTML = "開關燈";
statusDisplay.innerHTML = "當前狀態:" + status;
// 在這里添加關閉燈的代碼
}
});
在這個案例中,我們創建了一個按鈕,當用戶點擊按鈕時,會觸發一個事件監聽器。如果當前狀態為“熄滅”,則將狀態設置為“亮起”,按鈕文字為“開關燈”,狀態顯示為“當前狀態:亮起”,然后在代碼中添加點亮燈的代碼。如果當前狀態為“亮起”,則將狀態設置為“熄滅”,按鈕文字為“開關燈”,狀態顯示為“當前狀態:熄滅”,然后在代碼中添加關閉燈的代碼。
-
HTML
+關注
關注
0文章
278瀏覽量
40621 -
代碼
+關注
關注
30文章
4886瀏覽量
70178 -
javascript
+關注
關注
0文章
525瀏覽量
54443 -
按鈕開關
+關注
關注
1文章
50瀏覽量
10384
發布評論請先 登錄
KD2系列按鈕開關
按鈕開關型號_按鈕開關型號有哪些_按鈕開關有幾種
按鈕開關的應用原理及使用注意事項

評論