css电池样式,js控制电池百分比
时间: 2023-07-28 22:46:20 浏览: 70
好的,对于你的问题,我可以为你提供一些相关的代码实现。
首先,我们可以使用CSS来创建电池的样式,具体代码如下:
```css
.battery {
width: 50px;
height: 20px;
border: 1px solid black;
position: relative;
}
.battery::before {
content: '';
display: block;
width: 10px;
height: 16px;
background-color: #999;
position: absolute;
top: 1px;
left: 1px;
}
.battery::after {
content: '';
display: block;
width: 30px;
height: 16px;
background-color: #7DBA39;
position: absolute;
top: 1px;
left: 12px;
border-radius: 2px;
}
```
接下来,我们可以使用JavaScript来控制电池的百分比,代码如下:
```javascript
const battery = document.querySelector('.battery');
const batteryLevel = document.querySelector('.battery-level');
function updateBattery(level) {
const width = level + '%';
batteryLevel.style.width = width;
}
// 示例代码,每秒钟随机更新电池的百分比
setInterval(() => {
const level = Math.floor(Math.random() * 100);
updateBattery(level);
}, 1000);
```
在上面的代码中,我们首先选择了电池的DOM元素,并定义了一个名为`updateBattery`的函数来更新电池的百分比。我们使用`setInterval`函数来每秒钟随机更新电池的百分比,你可以根据实际需求来修改这个部分的代码。
希望这些代码对你有所帮助!