时间戳

首页 > 解决方案 > 在 bootstrap4 中创建电池符号

bootstrap-4 - 在 bootstrap4 中创建电池符号

问题描述

我想要一个电池电量指示器，这样：- 1. 我应该能够根据我得到的百分比值更改电池电量。2. 我应该能够根据百分比值更改电池电量的级别，例如如果低于 20%，则应指示红色，对于其他级别的其他颜色。

我知道我们可以通过 Html 创建，但它不那么吸引人。

标签： bootstrap-4

解决方案

fa-battery-empty您可以在 FontAwesome类的帮助下自定义自己的样式。所以在这个类里面放span标签并映射空电池形状的全宽，所以在映射电池形状宽度后左+右间隙然后得到span宽度为73%。我们计算了100% = 73%它的意思1 = 0.73。所以在css函数span的帮助下保持宽度。例如：如果您有 50%，则设置宽度，如.calc()
width:calc(50% * 0.73)

我希望下面的代码片段对你有很大帮助。

setInterval(function(){
  var x = Math.floor((Math.random() * 100) + 1);
  document.getElementById("result").setAttribute("style", "width:calc("+x+"% * 0.73)");
  document.getElementById("result2").setAttribute("style", "width:calc("+x+"% * 0.73)");
  document.getElementById("result3").setAttribute("style", "width:calc("+x+"% * 0.73)");
},1000);
.font-20px{font-size: 20px!important;}
.font-50px{font-size: 50px!important;}
.font-70px{font-size: 70px!important;}

.fa-battery-filling{
  position: relative;
}
.fa-battery-filling span{
  position: absolute;
  background: orange;
  top: 28%;
  height: 44%;
  left: 11%;
  border-radius: 2px;
  transition: 250ms ease;
}
.fa-battery-filling [style="width:calc(1% * 0.73)"],
.fa-battery-filling [style="width:calc(2% * 0.73)"], 
.fa-battery-filling [style="width:calc(3% * 0.73)"], 
.fa-battery-filling [style="width:calc(4% * 0.73)"], 
.fa-battery-filling [style="width:calc(5% * 0.73)"], 
.fa-battery-filling [style="width:calc(6% * 0.73)"], 
.fa-battery-filling [style="width:calc(7% * 0.73)"], 
.fa-battery-filling [style="width:calc(8% * 0.73)"], 
.fa-battery-filling [style="width:calc(9% * 0.73)"], 
.fa-battery-filling [style="width:calc(10% * 0.73)"],
.fa-battery-filling [style="width:calc(11% * 0.73)"],
.fa-battery-filling [style="width:calc(12% * 0.73)"],
.fa-battery-filling [style="width:calc(13% * 0.73)"],
.fa-battery-filling [style="width:calc(14% * 0.73)"],
.fa-battery-filling [style="width:calc(15% * 0.73)"],
.fa-battery-filling [style="width:calc(16% * 0.73)"],
.fa-battery-filling [style="width:calc(17% * 0.73)"],
.fa-battery-filling [style="width:calc(18% * 0.73)"],
.fa-battery-filling [style="width:calc(19% * 0.73)"],
.fa-battery-filling [style="width:calc(20% * 0.73)"]{
  background: red;
}
.fa-battery-filling [style="width:calc(90% * 0.73)"],
.fa-battery-filling [style="width:calc(91% * 0.73)"],
.fa-battery-filling [style="width:calc(92% * 0.73)"],
.fa-battery-filling [style="width:calc(93% * 0.73)"],
.fa-battery-filling [style="width:calc(94% * 0.73)"],
.fa-battery-filling [style="width:calc(95% * 0.73)"],
.fa-battery-filling [style="width:calc(96% * 0.73)"],
.fa-battery-filling [style="width:calc(97% * 0.73)"],
.fa-battery-filling [style="width:calc(98% * 0.73)"],
.fa-battery-filling [style="width:calc(99% * 0.73)"],
.fa-battery-filling [style="width:calc(100% * 0.73)"]{
  background: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-battery-empty font-20px fa-battery-filling" aria-hidden="true">
  <span id="result" style="width:calc(10% * 0.73)"></span>
</i>
<i class="fa fa-battery-empty font-50px fa-battery-filling" aria-hidden="true">
  <span id="result2" style="width:calc(10% * 0.73)"></span>
</i>
<i class="fa fa-battery-empty font-70px fa-battery-filling" aria-hidden="true">
  <span id="result3" style="width:calc(10% * 0.73)"></span>
</i>

推荐阅读