如何有一个on - off开关，同时显示一个on和一个off？ - 腾讯云开发者社区

要实现一个同时显示on和off的on-off开关，可以使用HTML和CSS来创建一个简单的开关按钮。

首先，我们需要创建一个HTML页面，并在页面中添加一个div元素作为开关容器。然后，使用CSS样式来设置开关的外观。

HTML代码如下：

<div class="switch-container">
  <div class="switch"></div>
  <div class="on">ON</div>
  <div class="off">OFF</div>
</div>

接下来，使用CSS样式来设置开关的外观和交互效果。

CSS代码如下：

.switch-container {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  border-radius: 25px;
  cursor: pointer;
}

.switch {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  transition: left 0.3s;
}

.on,
.off {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.on {
  left: 5px;
}

.off {
  right: 5px;
}

.switch-container.on .switch {
  left: 52px;
}

上述代码中，我们使用了一个div元素作为开关容器，并设置了它的宽度、高度、背景颜色和边框圆角等样式。然后，我们在开关容器中添加了一个表示开关状态的div元素，并使用绝对定位来控制它的位置。通过设置开关容器的class为"on"或"off"，可以切换开关的状态。

最后，我们可以使用JavaScript来实现开关的交互效果。当用户点击开关容器时，我们可以通过切换开关容器的class来改变开关的状态。

JavaScript代码如下：

var switchContainer = document.querySelector('.switch-container');

switchContainer.addEventListener('click', function() {
  switchContainer.classList.toggle('on');
});

上述代码中，我们使用addEventListener方法来监听开关容器的点击事件。当用户点击开关容器时，我们通过调用classList.toggle方法来切换开关容器的class，从而改变开关的状态。

至此，我们已经完成了一个同时显示on和off的on-off开关。用户可以通过点击开关容器来切换开关的状态，同时显示相应的文字。

这个开关可以应用于各种场景，例如控制设备的开关、切换应用的状态等。腾讯云提供了丰富的云计算产品，可以根据具体需求选择适合的产品。例如，可以使用腾讯云的云服务器（CVM）来搭建应用程序的后端环境，使用腾讯云的对象存储（COS）来存储多媒体文件，使用腾讯云的人工智能服务（AI）来进行图像识别等。具体的产品介绍和链接地址可以在腾讯云官网上找到。