css做电池显示电量简单的黑白

要在CSS中简单地实现黑白的电池显示电量，可以按照以下步骤进行操作：

1. 首先，创建一个包含电池的父元素容器。可以使用一个`<div>`元素来代表电池。为该元素设置适当的宽度和高度，并使用`position`属性将其相对于父级容器进行定位。

2. 创建一个表示电池的内部区域。在电池容器内部创建一个`<div>`元素，并设置其宽度、高度和位置，以适当地表示电池内部的电量剩余情况。可以使用`background-color`属性来控制电池内部区域的颜色，例如，使用黑色表示电池内部为空，使用白色表示电池内部有电。

3. 创建一个表示电量的文本。在电池容器内部创建一个`<span>`元素，并设置其位置和样式，以表示电池内部区域的电量百分比。可以使用JavaScript或服务器端脚本来计算电池的电量，并将其显示在文本中。

4. 最后，使用CSS样式来设置电池容器的边框样式，例如使用`border`属性设置边框宽度和颜色，使其符合电池的外观。

这样，通过简单的CSS样式和一些基本的HTML元素，就可以创建一个黑白的电池显示电量。根据需求，您还可以进一步完善和自定义这个电池显示效果。

相关问题

css写一个根据值显示电量的电池

可以使用CSS中的伪元素和渐变来实现显示电量的电池效果，具体代码如下：

HTML代码：

<div class="battery" data-level="75"></div>

CSS代码：

.battery {
  position: relative;
  width: 50px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 5px;
  overflow: hidden;
}

.battery:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(100% * (var(--level) / 100));
  background: linear-gradient(to right, #0f0, #0f0 50%, #fff 50%, #fff);
  border-radius: 3px;
  transition: width 0.5s ease;
}

[data-level="25"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 25%, #fff 25%, #fff);
}

[data-level="50"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 50%, #fff 50%, #fff);
}

[data-level="75"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 75%, #fff 75%, #fff);
}

其中，`data-level`属性表示电量百分比，可以设置25、50、75等不同的值来显示不同的电量。在CSS中，使用`var(--level)`来获取电量百分比并计算电池填充的宽度。通过设置不同的渐变色来实现电池填充的效果，并且使用过渡动画来实现电量变化时的平滑过渡。

请用css写出电池样式，并用js控制显示的电量

好的，我来为您解答。

首先，我们可以使用 CSS 中的伪元素 `::before` 和 `::after` 来绘制电池的外框和电量的填充。具体代码如下：

.battery {
  position: relative;
  width: 50px;
  height: 25px;
  border: 2px solid #333;
  border-radius: 5px;
  overflow: hidden;
}

.battery::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 30px;
  background-color: #333;
  border-radius: 3px;
}

.battery::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  width: 10px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 3px;
}

接下来，我们可以使用 JavaScript 来控制电量的显示。具体代码如下：

const battery = document.querySelector(".battery");
const batteryLevel = document.querySelector(".battery-level");

function setBatteryLevel(level) {
  battery.style.setProperty("--level", level + "%");
  batteryLevel.textContent = level + "%";
}

setBatteryLevel(50); // 初始化电量为 50%

// 模拟电量变化
setInterval(() => {
  const level = Math.floor(Math.random() * 101); // 生成 0~100 之间的随机整数
  setBatteryLevel(level);
}, 3000);

在上面的代码中，我们使用了 CSS 中的自定义属性 `--level` 来控制电量的填充。然后，我们通过 JavaScript 中的 `setProperty` 方法来修改这个自定义属性的值，并更新显示的电量文本。

最后，我们可以在 HTML 中添加以下代码来显示电池和电量：

<div class="battery">
  <div class="battery-level"></div>
</div>

完整的代码请参考以下代码片段：

.battery {
  position: relative;
  width: 50px;
  height: 25px;
  border: 2px solid #333;
  border-radius: 5px;
  overflow: hidden;
}

.battery::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
  width: 30px;
  background-color: #333;
  border-radius: 3px;
}

.battery::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  width: 10px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 3px;
}

.battery-level {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--level);
  height: 100%;
  background-color: #00ff00;
  border-radius: 3px;
  transition: width 0.5s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

<div class="battery">
  <div class="battery-level"></div>
</div>

<script>
const battery = document.querySelector(".battery");
const batteryLevel = document.querySelector(".battery-level");

function setBatteryLevel(level) {
  battery.style.setProperty("--level", level + "%");
  batteryLevel.textContent = level + "%";
}

setBatteryLevel(50); // 初始化电量为 50%

// 模拟电量变化
setInterval(() => {
  const level = Math.floor(Math.random() * 101); // 生成 0~100 之间的随机整数
  setBatteryLevel(level);
}, 3000);
</script>

希望我的回答能帮到您！