如何在控制台中显示电源按钮的 on/off 值？

Question

我已经为 neumorphism 电源按钮编写了代码，它工作得很好，但我无法弄清楚如何使用 javascript 在控制台中显示状态，即，如果电源按钮是开还是关。

HTML代码：

    <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">
</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;

}

Answer 1

为电源按钮添加一个change事件监听器，然后检查它是否被checked 属性:

选中

document.querySelector('input').addEventListener('change', function() {
  console.log(`Power button is${this.checked ? "" : " not"} checked`);
})

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;
}

<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">
</body>

Answer 2

我不会发布答案，而是尝试指导您：

想想状态将如何变化——只有当你的输入发生变化时。最初它会关闭。

在文档加载时，在输入中附加 onchange 的事件处理程序。使用 event.target.checked 显示值。这里的事件是你的更改事件。

如何在控制台中显示电源按钮的 on/off 值？

How to display on/off value for the power button in console?

html

javascript

css

console.log