突发奇想,有一种可以简单实现数据库中进度条的方式!
就是用 🟩 和 ⬜ 按照比例来堆砌。当然,这只能粗略地体现百分比中十位的数字,个位的数字是体现不出来的。
后来经过 D 大和评论区大神的帮助,又有了完善的进度条显示方式(即进度条 3)!
效果如下:
-
建立两个数字类型的列,分别命名为“总数”和“已完成”
-
建立 2 个模板列,分别命名为“进度”和“进度条”
-
“进度”列代码
.action{$a:= index . "已完成" } .action{$b:= index . "总数" } .action{$c:= mul $a 100} .action{$d:= div $c $b} .action{$d}%
-
“进度条”列代码
-
第一种是向下取整,即只看十位数
.action{$a:= index . "已完成" } .action{$b:= index . "总数" } .action{$c:= mul $a 10} .action{$d:= div $c $b} .action{if eq $d 0} ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if eq $d 1} 🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if eq $d 2} 🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if eq $d 3} 🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜ .action{else if eq $d 4} 🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜ .action{else if eq $d 5} 🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜ .action{else if eq $d 6} 🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜ .action{else if eq $d 7} 🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜ .action{else if eq $d 8} 🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜ .action{else if eq $d 9} 🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜ .action{else if eq $d 10} 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 .action{end}
-
第二种是四舍五入,就不解释了
.action{$a:= index . "已完成" } .action{$b:= index . "总数" } .action{$c:= mul $a 100} .action{$d:= div $c $b} .action{if lt $d 5} ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if lt $d 15} 🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if lt $d 25} 🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜ .action{else if lt $d 35} 🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜ .action{else if lt $d 45} 🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜ .action{else if lt $d 55} 🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜ .action{else if lt $d 65} 🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜ .action{else if lt $d 75} 🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜ .action{else if lt $d 85} 🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜ .action{else if lt $d 95} 🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜ .action{else} 🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 .action{end}
-
第三种是评论区大神的方法,可以精确到个位数
.action{$a:= index . "已完成" } .action{$b:= index . "总数" } .action{$c:= mul $a 100} .action{$d:= div $c $b} <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;"> <span style="text-align: right; font-size: 12px; width: .action{$d}%; background-color: rgb(45,164,78); display: inline-block;height: inherit;vertical-align: top;"></span> </span>
-
世上还是大神多呀!
如果你还有更好的方式,欢迎和我交流 ~
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于