📌  相关文章
📜  使用 JavaScript 打开或关闭灯泡(1)

📅  最后修改于: 2023-12-03 15:06:47.575000             🧑  作者: Mango

JavaScript控制灯泡打开或关闭

在Web应用程序中，JavaScript可以用来控制HTML页面元素。在这个例子中，我们将演示如何使用JavaScript打开或关闭一个灯泡。

HTML代码

下面是一个简单的HTML代码，它包含了一个按钮和一个灯泡。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript控制灯泡的开关</title>
</head>
<body>
	<h1>JavaScript控制灯泡的开关</h1>

	<button id="toggleButton">打开灯泡</button>

	<div id="lightBulb" style="width:100px;height:100px;background-color:gray;"></div>
</body>
</html>

在上面的代码中，我们使用了一个<button>元素和一个<div>元素（它代表灯泡）。当用户点击按钮时，我们将使用JavaScript来控制灯泡的开关。

JavaScript代码

下面是JavaScript代码：

// 获取按钮和灯泡元素
var toggleButton = document.getElementById("toggleButton");
var lightBulb = document.getElementById("lightBulb");

// 初始开关状态为关闭
var isOn = false;

// 给按钮添加一个点击事件监听器，以便在单击时切换灯泡的状态
toggleButton.addEventListener("click", function() {
  if (isOn) {
    // 关闭灯泡
    lightBulb.style.backgroundColor = "gray";
    isOn = false;
    toggleButton.textContent = "打开灯泡";
  } else {
    // 打开灯泡
    lightBulb.style.backgroundColor = "yellow";
    isOn = true;
    toggleButton.textContent = "关闭灯泡";
  }
});

在上面的代码中，我们首先获取了按钮和灯泡元素，然后定义了一个名为isOn的变量，该变量代表灯泡当前的状态。初始状态为关闭，因此它的值为false。之后，我们给按钮添加了一个click事件监听器。当用户单击按钮时，该监听器将通过if语句来判断灯泡的当前状态。如果灯泡是打开的，则我们将其关闭，反之亦然。

运行结果

现在我们可以在浏览器中打开HTML文件并点击按钮，以检查JavaScript代码是否成功控制了灯泡。如果一切运行正常，我们应该可以看到灯泡的背景颜色在打开和关闭时切换。