以下是一個(gè)簡單的JavaScript按鈕開關(guān)燈案例:
HTML代碼:
< button id="switch" >開關(guān)燈< /button >
< p id="status" >當(dāng)前狀態(tài):熄滅< /p >
JavaScript代碼:
let status = "熄滅";
const switchButton = document.getElementById("switch");
const statusDisplay = document.getElementById("status");
switchButton.addEventListener("click", function() {
if (status === "熄滅") {
status = "亮起";
switchButton.innerHTML = "開關(guān)燈";
statusDisplay.innerHTML = "當(dāng)前狀態(tài):" + status;
// 在這里添加點(diǎn)亮燈的代碼
} else {
status = "熄滅";
switchButton.innerHTML = "開關(guān)燈";
statusDisplay.innerHTML = "當(dāng)前狀態(tài):" + status;
// 在這里添加關(guān)閉燈的代碼
}
});
在這個(gè)案例中,我們創(chuàng)建了一個(gè)按鈕,當(dāng)用戶點(diǎn)擊按鈕時(shí),會(huì)觸發(fā)一個(gè)事件監(jiān)聽器。如果當(dāng)前狀態(tài)為“熄滅”,則將狀態(tài)設(shè)置為“亮起”,按鈕文字為“開關(guān)燈”,狀態(tài)顯示為“當(dāng)前狀態(tài):亮起”,然后在代碼中添加點(diǎn)亮燈的代碼。如果當(dāng)前狀態(tài)為“亮起”,則將狀態(tài)設(shè)置為“熄滅”,按鈕文字為“開關(guān)燈”,狀態(tài)顯示為“當(dāng)前狀態(tài):熄滅”,然后在代碼中添加關(guān)閉燈的代碼。
-
HTML
+關(guān)注
關(guān)注
0文章
278瀏覽量
35207 -
代碼
+關(guān)注
關(guān)注
30文章
4779瀏覽量
68524 -
javascript
+關(guān)注
關(guān)注
0文章
516瀏覽量
53851 -
按鈕開關(guān)
+關(guān)注
關(guān)注
1文章
50瀏覽量
10211
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論