数据库模板列进度条来啦!

本贴最后更新于 363 天前,其中的信息可能已经东海扬尘

突发奇想,有一种可以简单实现数据库中进度条的方式!
就是用 🟩 和 ⬜ 按照比例来堆砌。当然,这只能粗略地体现百分比中十位的数字,个位的数字是体现不出来的。

后来经过 D 大和评论区大神的帮助,又有了完善的进度条显示方式(即进度条 3)!

效果如下:

截屏 2024022515.15.32.png

  • 建立两个数字类型的列,分别命名为“总数”和“已完成”

  • 建立 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>

世上还是大神多呀!

如果你还有更好的方式,欢迎和我交流 ~

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    24151 引用 • 98472 回帖
2 操作
Liuzn 在 2024-02-25 22:59:48 更新了该帖
Liuzn 在 2024-02-25 15:23:45 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Feline 1 赞同

    支持 html/css,进度条直接用 progress 也成,但是改样式没有手搓进度条来得方便。

    <progress max=.action{.总数} value=.action{.已完成}></progress>
  • 其他回帖
  • leoyao 1

    在 v3.0.10 后会报错,更新后如下

    .action{$a:= index . "已完成" 0} .action{$b:= index . "总数" 0} .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: 20px; border-radius: 5px; align-self: center; overflow: hidden; position: relative; font-family: Arial, sans-serif;"> <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; color: white; padding-right: 5px; line-height: 20px;">.action{$d}%</span> <span style="position: absolute; right: 5px; top: 0; bottom: 0; color: black; display: flex; align-items: center;"></span> </span>
    2 回复
    1 操作
    JeffreyChen 在 2024-05-17 16:38:44 更新了该回帖
  • mark-j 1 评论

    进度百分比和进度条能否合二为一?

    前两种进度条应该都是可以的,第三种进度条我也不知道能不能,需要大神来说明了
    Liuzn
  • mark-j

    进度条和数值二合一代码image.png

  • 查看全部回帖

推荐标签 标签

  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    87 引用 • 139 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 15 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖 • 1 关注
  • abitmean

    有点意思就行了

    29 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 650 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 796 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 512 回帖
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 3 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 258 关注
  • danl
    164 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    28 引用 • 225 回帖 • 139 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 406 关注
  • sts
    2 引用 • 2 回帖 • 207 关注
  • CodeMirror
    1 引用 • 2 回帖 • 142 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 4 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 14 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Excel
    31 引用 • 28 回帖
  • OnlyOffice
    4 引用 • 16 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 5 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 1 关注