数据库模版列如何使用这样的进度条

本贴最后更新于 627 天前,其中的信息可能已经水流花落

对于每天看打卡状态的人来说,通过 checkbox 打卡再正常不过了,虽然模板列的功能很强大,可玩性更高,但是对小白真的很不友好,像这样通过 checkbox 显示的进度条在 notion、flowus、wolai 上都能轻松实现,求求好心的大佬给个代码,相信会有很多人需要的 🙏

CleanShot20240405at00.19.082x.png

  • 思源笔记

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

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

    28448 引用 • 119792 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    11156 引用 • 50667 回帖 • 52 关注

相关帖子

被采纳的回答
  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */}
    .action{$count:= 0}
    
    .action{/* 有多少列就填多少组 */}
    .action{$state1:= index . "早起"}
    .action{$state2:= index . "运动"}
    .action{$state3:= index . "阅读"}
    .action{$state4:= index . "日报"}
    
    .action{if eq $state1 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state2 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state3 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state4 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    
    .action{$width:= round (mulf (divf $count $total) 100) 0}
    .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2}
    
    <div style="display: flex; justify-content: flex-end; height: 100%;">
    <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span>
    <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{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    </div>
    

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • SenorPink

    如果遇到需要的功能可以在社区中寻找相应的代码,再建立一个模板,用的时候就方便多了,目前看来只能这样

    1 回复
  • 其他回帖
  • SenorPink

    真是太棒了!我昨天写的时候总是想把每个 ✓ 转成 1,原来可以这么简单就实现!😭

  • ZhangL-1

    请问这个代码应该放到哪

  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */}
    .action{$count:= 0}
    
    .action{/* 有多少列就填多少组 */}
    .action{$state1:= index . "早起"}
    .action{$state2:= index . "运动"}
    .action{$state3:= index . "阅读"}
    .action{$state4:= index . "日报"}
    
    .action{if eq $state1 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state2 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state3 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    .action{if eq $state4 "√"}
    .action{$count = add1 $count}
    .action{end}
    
    
    .action{$width:= round (mulf (divf $count $total) 100) 0}
    .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2}
    
    <div style="display: flex; justify-content: flex-end; height: 100%;">
    <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span>
    <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{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    </div>
    
    1 回复
  • 查看全部回帖

推荐标签 标签

  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    2 引用 • 34 回帖 • 2 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    146 引用 • 442 回帖
  • Follow
    4 引用 • 13 回帖 • 20 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    421 引用 • 3610 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 436 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    61 引用 • 29 回帖 • 13 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    174 引用 • 414 回帖 • 344 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 46 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 663 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 3 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    16 引用 • 143 回帖 • 5 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • OneNote
    2 引用 • 5 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 8 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 579 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖 • 2 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 641 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 1 关注
  • MongoDB

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

    91 引用 • 59 回帖 • 1 关注
  • App

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

    91 引用 • 384 回帖