📅 最后修改于: 2023-12-03 14:39:01.043000 🧑 作者: Mango
在这篇文章中，我们将使用JavaScript编写代码来点亮一盏灯泡。我们将使用HTML和CSS创建灯泡，然后使用JavaScript来控制它。让我们开始吧！
首先，我们需要创建一个HTML文档并添加一个灯泡。让我们创建一个名为index.html的文件并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript灯泡</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="light-bulb"></div>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们首先链接了一个名为style.css的CSS文件以设置灯泡的外观。然后我们创建了一个名为light-bulb的div来表示灯泡。最后，我们链接了一个名为script.js的JavaScript文件，我们将在其中编写控制灯泡的代码。
在style.css文件中，我们可以通过以下代码来设置灯泡的外观：
.light-bulb {
background-color: gray;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid #333;
box-sizing: border-box;
}
在上面的代码中，我们定义了一个名为light-bulb的类来设置灯泡的外观。我们设置了背景色、宽度、高度、边框样式和圆角等属性。
现在让我们来到script.js文件，这里是我们用JavaScript控制灯泡的地方。让我们添加以下代码：
var lightBulb = document.querySelector('.light-bulb');
lightBulb.addEventListener('click', function() {
if (lightBulb.classList.contains('on')) {
lightBulb.classList.remove('on');
} else {
lightBulb.classList.add('on');
}
});
在上面的代码中，我们首先选择了light-bulb类的元素，并将其存储在名为lightBulb的变量中。然后，我们添加了一个名为click的事件监听器，当灯泡被单击时，将执行另一个函数。这个函数检查灯泡是否已经打开，如果已经打开，则关闭灯泡，否则打开灯泡。
现在，我们可以测试我们的代码了。在浏览器中打开index.html文件，单击灯泡，您将看到它打开或关闭。恭喜你完成了一次Javascript控制灯泡！
在本文中，我们学习了如何使用HTML，CSS和JavaScript来创建一个可控制的灯泡。我们了解了如何使用addEventListener函数来添加事件监听器，以及如何使用classList属性来添加或删除类名。希望这篇文章对你有所帮助！