javascript按钮开关灯案例

描述

以下是一个简单的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;
    // 在这里添加关闭灯的代码
  }
});

在这个案例中,我们创建了一个按钮,当用户点击按钮时,会触发一个事件监听器。如果当前状态为“熄灭”,则将状态设置为“亮起”,按钮文字为“开关灯”,状态显示为“当前状态:亮起”,然后在代码中添加点亮灯的代码。如果当前状态为“亮起”,则将状态设置为“熄灭”,按钮文字为“开关灯”,状态显示为“当前状态:熄灭”,然后在代码中添加关闭灯的代码。

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

开关灯< /button > < p id="status" >当前状态:熄灭< /p > JavaScript代码:let status = "熄灭"; const switchButton = document.getElementById("switch"); const statu">
×
20
完善资料,
赚取积分