请用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>

希望我的回答能帮到您！