如何使用JavaScript在控制台显示新拟态电源按钮的开关状态？

嘿，你的新拟态电源按钮效果看起来超赞！要实现控制台显示开关状态的功能，只需要给复选框添加一个change事件监听器，通过判断它的checked属性来输出对应的状态就可以了。下面是具体的实现方案：

完整代码示例 #

HTML（添加id方便获取元素） #

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <input type="checkbox" id="powerBtn">
</body>

CSS（保持你原有的样式不变） #

body{ 
  background-color: black; 
  padding: 0; 
  margin:0; 
}
input[type="checkbox"]{ 
  height: 150px; 
  width: 150px; 
  -webkit-appearance: none; 
  box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5); 
  position: absolute; 
  transform: translate(-70%,-70%); 
  top: 20%; 
  left: 80%; 
  border-radius: 50%; 
  border: 8px solid black; 
  outline: none ; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
}
input[type="checkbox"]::after{ 
  font-family:FontAwesome; 
  content:'\f011'; 
  color: grey; 
  font-size: 70px; 
}
input[type="checkbox"]:checked{ 
  box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.5), inset 10px 10px 15px rgba(0, 0, 0, 0.5) ; 
}
input[type="checkbox"]:checked::after{ 
  color: green; 
}

JavaScript（添加状态监听与控制台输出） #

// 获取电源按钮元素
const powerBtn = document.getElementById('powerBtn');

// 添加change事件监听器
powerBtn.addEventListener('change', function() {
  // 判断按钮状态并输出到控制台
  if (this.checked) {
    console.log('电源已开启');
  } else {
    console.log('电源已关闭');
  }
});

代码说明 #

• 首先给复选框添加了id="powerBtn"，这样可以通过getElementById快速获取到DOM元素；
• 使用change事件监听按钮状态的变化，这个事件会在复选框的选中状态改变时触发；
• 在事件处理函数中，通过this.checked判断当前按钮是否被选中（即电源是否开启），然后用console.log输出对应的状态信息。

这样每次点击电源按钮切换状态时，浏览器的控制台就会实时打印出当前的开关状态啦！

内容的提问来源于stack exchange，提问作者Jami