日常开发中，实现倒计时功能最先想到的是使用 JavaScript 定时器，随着 CSS 的发展，现代 CSS 被越来越多的浏览器所支持，本文将探索使用现代 CSS 的特性，实现倒计时效果。

1.核心知识点

实现倒计时的核心是通过 CSS Animation 实现伪元素的内容变化。用到的核心知识点包括 CSS @property 和 CSS Counter。

1.1.CSS @property

引用 MDN 的定义：

@property CSS at-rule 是 CSS Houdini API 的一部分，它允许开发者显式地定义他们的CSS 自定义属性, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。

@property 规则提供了一个直接在样式表中注册自定义属性的方式，而无需运行任何 JS 代码。有效的 @property 规则会注册一个自定义属性，就像 CSS.registerProperty (en-US) 函数被使用同样的参数调用了一样。

基础语法：

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

浏览器兼容性：

1.2.CSS Counter

基本介绍：

1. counter-reset: counter-name start-value

主要用于创建或复位计数器。

• counter-name：计数器的唯一标识符。
• start-value：可选项，标识计数器的初始值。如果未指定，默认值为 0。

2. counter-increment: counter-name increment-value

主要用于增加或减少计数器的值

• counter-name：要递增的计数器的标识符。
• increment-value：要递增计数器的值。这是可选项，如果未指定，默认值为 1。

3. content: counter(counter-name, style)

要显示计数器的当前值，我们可以将 content 属性与 ::before 或 ::after 伪元素结合使用。content 属性使用以下语法显示计数器：

• counter-name：要显示的计数器的标识符。
• style：显示计数器值的样式。这是可选项，如果未指定，默认为十进制。

浏览器兼容性：

2.具体实现

2.1.实现页面框架

通过 html:5 和 div.countdown>svg.circle>(circle.circle-01[r=45]+circle.circle-02[r=45]) 快速创建页面及容器。在示例中除了实现倒计时的走秒效果，还通过增加 svg 元素来实现圆环进度效果，整体体验会更好。

<div class="countdown">
  <svg viewBox="-50 -50 100 100" stroke-width="10" class="circle">
    <circle r="45" class="circle-01"></circle>
    <circle r="45" class="circle-02" pathLength="1"></circle>
  </svg>
</div>

2.2.增加基础样式

通过给 svg 增加 stroke、stroke-lineup、stroke-dasharray 等样式来实现圆环效果，通过增加伪元素 ::after 作为时间容器来显示倒计时。基础样式如下：

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #282c34;
}

.countdown {
  display: grid;
  width: 20em;
  height: 20em;
  .circle {
    grid-column: 1;
    grid-row: 1;

    .circle-01 {
      fill: none;
      stroke: #fff;
    }

    .circle-02 {
      --t: 2;
      --k: calc(var(--t)/20);
      fill: none;
      transform: rotate(-90deg);
      stroke-linecap: round;
      stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d);
      stroke-dasharray: var(--k) 1;
    }
  }
  &::after {
    grid-column: 1;
    grid-row: 1;
    place-self: center;
    font-size: 5em;
    color: #fff;
    content: "00:19";
  }
}

初始效果如下：

2.3.增加动画

通过基础示例我们可以看到，要想实现倒计时效果，::after 元素的 content 属性值需要和 --t 变量关联上。

1）CSS Counter：

通过 CSS Counter 实现秒数打印，注意我们通过给 counter 增加 decimal-leading-zero 了以实现前导 0显示。

&::after {
  --s: calc(var(--t)/1);
  counter-reset: s var(--s);
  content: "00:" counter(s, decimal-leading-zero);
}

2）CSS @property：

通过 CSS property 来实现属性动画。

@property --t {
  syntax: "<number>";
  initial-value: 10;
  inherits: true;
}
@property --s {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

3）增加动画：

.countdown {
  animation: linear 10s linear infinite;

  .circle {
    .circle-02 {
      --k: calc(var(--t)/10);
      stroke: color-mix(in hsl shorter hue, #8a9b0f calc(var(--k)*100%), #940a3d);
      stroke-dasharray: var(--k) 1;
    }
  }
}
@keyframes linear {
  to {
    --t: 0;
  }
}

4）效果预览：

开始想要看看如何做日计划，计划和完成情况同时展示，但是day planner插件只能是做计划，但不好展示完成情况

我上网去搜索下他人是如何使用这个插件或者说是如何通过Obsidian来进行日程规划的，偶尔看到了这篇文章你真的需要Day Planner吗? - 经验分享 - Obsidian 中文论坛 ，用流水账的形式来记录自己的时间过程，感觉比较适合自己的工作流程。

实际上每天的计划很少能够很精准，更多的是对时间的记录或者日程的记录，这个合适的一点就是，很快速的记录当下在做什么，后续可以进一步复盘。

但是呢，文档里只有一种截图展示了效果，以及一段css文档。如我小白，其实不太知道这个东西怎么搞出来。

我翻看了这个博主其他所有的答案，在一个桌面展示上看到了<time></time>出现，感觉像是我需要的，另外还有个文档是time.js，我猜测是不是可能用snippet来实现的。

我尝试了snippet，不知道怎么搞。

然后又不停的去搜索人家怎么搞的，似乎找不到答案。暂时先将这个事情记录在[[00 TODO]]文档里

今天突然想到，其实我只是想要调整时间的样式，我是不是可以在 style setting里进行修改？可惜，这个插件里找不到对应的，毕竟是定制化的，那我是不是可以找到整个页面的css文档中尝试下呢？

嘿还真是，不错。记录如下。

复盘想法

- 当你想要解决一些问题时，可以选择网上搜索。实际上，我所遇到的绝大多数问题，都是别人已经遇到的问题，也一定会有很多有能之士给出了很多方案。在这过程当中，基本可以解决大多数的问题。

- 网上遇到的解决办法可能因为你电脑配置的环境以及其他的情况，导致与你的需求并不完全一致，这个时候可以根据自己的需求进行微调

- 但最最最重要的一点，也是最容易忘记的：你最初想要解决的是什么问题，是一定要通过复杂的方式解决吗？通过已知的方法你可以解决到什么程度，哪些地方才是真正阻碍你达到这个目的的？能不能单独解决它？

个人进化过程的5个步骤：
1. 明确的目标
2. 找到并不容忍目标实现的阻碍
3. 准确诊断，找到根源
4. 规划解决方案
5. 做一切必要的事来践行方案

Part1 目标

当我点击快捷按钮流水账，自动在当天的日计划文档里增加内容，显示当下时间和可输入当下状态

目标分解即为：

1. 点击按钮可以输入当下状态，并且随时可以输入记录，按时间排序记录
2. 该项在当天日计划文档中自动记录
3. 如果没有日计划文档可以自动新建该文档
4. 自动生成显示输入的时间，还要好看
5. 在标题为 流水账 下显示，不影响其他的当天已有内容
6. 重要：方便快捷清楚好看

Part 2 解决方案

1 使用的插件

1. Quickadd：可以设置一些快捷方式
2. cMenu（nice to have）：在文章编辑页面增加快捷菜单页

2 配置过程

1. 首先，在主题中的theme增加时间的样式

time {
    color: #FFFBF0 ; /*象牙白*/
    background-color: #549688; /* 背景 铜绿 #40bfaf;*/
    padding: 1px 6px;
 font-weight: bold;
    box-shadow: 5px 5px var(--outline) ;
}

2. quickadd插件中增加流水账的快捷方式 设置对应的地址文档，当文档不存在时自动创建

当点击时，可以输入内容

- <time>{{time}}</time> {{value}}

3. 设置命令面板的快捷按钮

4.在打开命令面板即可使用

5. 惊喜！ 可使用插件cMenu将一些快捷按钮置于编辑页，方便！

最终展示如下：

搞定！

件引用规范

先说加载的规范，这个规范主要是为了提高页面加载速度或者是首屏的速度。

1 CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。

2 JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在尾部可以加快首屏显示的速度，但对整个页面完成加载的时间没什么影响。

3 使用压缩后的文件。线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，这样可以减少文件的体积，从而减少下载的时间。

4 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求, 会拖慢 CSS 文件的加载速度。

属性的书写规范

一、使用缩写

在 CSS 中有很多属性或属性值可以缩写, 在能用缩写的地方尽量使用缩写。

1、属性的缩写。CSS 中有些属性是可以合并的, 如:

margin-top: 10px;
margin-bottom: 0;
margin-left: 5px;
margin-right: 5px;

上面这几组 margin 相关的属性占了四条样式, 我们可以使用一条 margin 属性代替这四个方向的 margin：

margin: 10px 5px 0 5px;

一般带有方向的属性, 缩写的时候各个方向的值都是按着"上 右 下 左"的顺序写的。另外如果四个方向值一样，可以直接用一个值代替四个方向；如果左右方向的值一样，则可以省略最后一个左侧的值。

上面这条缩写也可以写成：

margin: 10px 5px 0;

2、颜色的缩写。在使用十六进制颜色的时候, 如果 rgb 三个颜色位置中, 每两位的颜色值相同, 可以把六位的颜色写成三位。

如：color: #22ffcc;

就可以写成：

color: #2fc;

这两种写法是等效的, 但要注意的是如果需要兼容低版本 IE 浏览器, 还是要用六位的颜色值。

3、数字的缩写。在 CSS 中如果整数部分是 0 的小数, 可以忽略小数点前面的 0; 如果属性值是 0, 则可以忽略属性值的单位。

如: font-size: 0.8rem; padding: 0px;

这两条属性就可以做简写：

font-size: .8rem; padding: 0;

二、属性顺序的规范

理论上, CSS 的属性是一条一条解析执行的。这种情况下, 就要把能确定大小和位置的属性写在前面, 把对布局没什么影响的属性写在后面, 避免返工。

一般说的使用顺序如下:

1. 位置属性 (position, top, right, z-index, display, float等)　　

2. 大小 (width, height, padding, margin)　　

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)　　

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注释规范

一 文件头注释

/*
* @Author: zhangsan
* @Date: 2023-04-18 20:09:21
* @Last Modified by: zhangsan
* @Last Modified time: 2023-05-05 10:21:21
*/

二 普通注释

/* 头部导航 */
.nav-top{
background: #ccc;
}

CSS-Reset