整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
日常開發中，實現倒計時功能最先想到的是使用 JavaScript 定時器，隨著 CSS 的發展，現代 CSS 被越來越多的瀏覽器所支持，本文將探索使用現代 CSS 的特性，實現倒計時效果。
實現倒計時的核心是通過 CSS Animation 實現偽元素的內容變化。用到的核心知識點包括 CSS @property 和 CSS Counter。
引用 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;
}
瀏覽器兼容性：
基本介紹：
主要用于創建或復位計數器。
主要用于增加或減少計數器的值
要顯示計數器的當前值，我們可以將 content 屬性與 ::before 或 ::after 偽元素結合使用。content 屬性使用以下語法顯示計數器：
瀏覽器兼容性：
通過 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>
通過給 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";
}
}
初始效果如下：
通過基礎示例我們可以看到，要想實現倒計時效果，::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. 做一切必要的事來踐行方案當我點擊快捷按鈕流水賬，自動在當天的日計劃文檔里增加內容，顯示當下時間和可輸入當下狀態
目標分解即為：
time {
color: #FFFBF0 ; /*象牙白*/
background-color: #549688; /* 背景 銅綠 #40bfaf;*/
padding: 1px 6px;
font-weight: bold;
box-shadow: 5px 5px var(--outline) ;
}
當點擊時，可以輸入內容
- <time>{{time}}</time> {{value}}
4.在打開命令面板即可使用
最終展示如下：
搞定！
件引用規范
先說加載的規范，這個規范主要是為了提高頁面加載速度或者是首屏的速度。
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
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
