日常開發中，實現倒計時功能最先想到的是使用 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 作為時間容器來顯示倒計時?；A樣式如下：

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