使用CSS實現(xiàn)時間軸展示效果

看最終效果：

制作思路：

在timeline里每一行使用dl標(biāo)簽布局；每行(dl)左側(cè)的邊框使用border-left繪制。左側(cè)圓形使用dt布局，我們可以使用border給dt加邊框，使用border-radius繪制圓形效果，右側(cè)文字使用dd排列。

html布局代碼如下：

<dl>

<dd>

<h3>管家接單中</h3>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

</div>

css樣式代碼：

.timeline{ padding: 1rem 0;}

.timeline dl{border-left:1px solid #eee; position:relative; margin:0 0 0 .5rem; height: 5rem;}

.timeline dl dt{ position: absolute; left: -.5rem; top:0rem; width:.5rem; height: .5rem; border-radius: .5rem; border:2px solid #eee; background-color: #fff;}

.timeline dl dt.on{border:2px solid #FF8800;}

.timeline dl dd{ position: absolute; left: 1rem; top:0rem;}

.timeline dl dd h3{font-size:1.1rem; font-weight:600; padding:0 0 .5rem 0; color: #333333;}

.timeline dl dd p{ color: #949494;}

.timeline dl:last-child{border-left:none; }

說明：定義dl樣式的時候position一定要使用relative。因為后面我們需要給里面的dt和dd使用絕對定位。

dt標(biāo)簽里，position：absolute代表使用絕對定位。left位置為-.5rem代表向左負(fù)的0.5rem（這里我使用的rem單位，你們使用px的話，就寫具體的px 值）。寬和高也同時是.5rem。然后為了繪制圓形設(shè)置border-radius也是.5rem。邊框使用border屬性設(shè)置寬度為2px。

dd標(biāo)簽里，同樣設(shè)置position:absolute使用絕對定位。設(shè)置left為1rem（代表距離左邊界1rem）。

然后我們看到最后一個dl左邊是沒有邊框的，如下圖箭頭所示：

這個是通過：.timeline dl:last-child{border-left:none; }設(shè)定的。

如果沒有這行，效果就是這邊的樣子了：

好了，介紹就這些，代碼不多，實現(xiàn)了效果：）

一天，我需要一個數(shù)字時鐘組件，所以我很快編寫了一個簡單的 JavaScript 方法：

function uiDigitalClock(node) {
  const now = () => {
    node.textContent = new Date().toLocaleTimeString()
    requestAnimationFrame(now)
  }
  now()
}

我在某處讀到，這requestAnimationFrame應(yīng)該比更好的性能setInterval，但該方法一直困擾著我。

在最佳條件下，每秒requestAnimationFrame觸發(fā)60 次——這比數(shù)字時鐘需要的多 60 倍！

Date()每秒創(chuàng)建 60 次對象對性能來說并不好！

所以我嘗試了setInterval：

function interval(node){
  return setInterval(() => node.textContent = new Date().toLocaleTimeString(), 1000)
}

同樣，代碼不多，視覺結(jié)果是相同的 - 并且每秒只有一個對象。 Date()

又怎樣呢setTimeout()？

function timeout(node) {
  const now = () => {
    node.textContent = new Date().toLocaleTimeString()
    setTimeout(now, 1000)
  }
  now()
}

它也能得到類似的結(jié)果，但有令人討厭的延遲（setImmediate()僅在 Node 中）

然后我決定修改初始版本，只每秒觸發(fā)一次，并requestAnimationFrame()返回時間戳：

function frame(node) {
  let last = 0;
  const render = now => {
    if (!last || now - last >= 1000) {
      last = now;
      node.textContent = new Date().toLocaleTimeString();
    }
    requestAnimationFrame(render);
  }
  window.requestAnimationFrame(render);
}

當(dāng)所有 3 個方法都運行時，我碰巧檢查了開發(fā)工具中的標(biāo)記，并注意到我什至無法擴(kuò)展節(jié)點，因為它們不斷刷新，并且看起來像舊的<blink>-tag！

向巴德尋求幫助

仍然不知道該選擇哪種方法，我決定詢問 Google Bard，它回答說：

Clock1使用該setInterval()方法創(chuàng)建一個每 1000 毫秒（1 秒）觸發(fā)一次的循環(huán)計時器。這是性能最低的方法，因為它為每次迭代創(chuàng)建一個新的計時器，這可能會增加大量的開銷。
Clock2使用該setTimeout()方法，創(chuàng)建一個在 1000 毫秒后觸發(fā)的計時器。這比clock1 性能更高，因為它不會為每次迭代創(chuàng)建新的計時器。然而，它的性能仍然不如clock3，因為瀏覽器必須等待計時器觸發(fā)才能更新文本內(nèi)容。
Clock3使用該requestAnimationFrame()方法，這是請求瀏覽器重繪的更有效方法。瀏覽器只會在必要時重新繪制元素，這可以節(jié)省大量的 CPU 時間。

好吧，我決定使用clock3 ...但后來我突然想到：“ CSS 中的數(shù)字動畫怎么樣？使用@property？

Jhey不久前制作了一個純 CSS 秒表，所以我決定嘗試類似的東西。

@property --seconds {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --minutes {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --hours {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

然后，在<ol>-tag 中，我<li>為每個時間單位添加了一個 -tag。

要使用 - 聲明的值@property，您需要使用 CSS 計數(shù)器，因此幾秒鐘內(nèi)它是：

.seconds {
  animation: seconds 60s steps(60, end) infinite;
  animation-delay: var(--delay-seconds, 0s);
  counter-reset: seconds var(--seconds);
  &::after { content: counter(seconds, decimal-leading-zero) ' '; }
}

要為秒設(shè)置動畫，需要一個關(guān)鍵幀：

@keyframes seconds { 
  from { --seconds: 0;}
  to { --seconds: 60; }
}

對于幾分鐘來說，幾乎是一樣的，但是動畫花費了 60 倍的時間 (60 x 60 = 3600)：

animation: minutes 3600s steps(60, end) infinite;

對于幾個小時，我們需要將該數(shù)字乘以 24：

animation: hours 86400s steps(24, end) infinite;

耶！我們有一個可以工作的 CSS 時鐘……但它只在午夜工作，因為小時、分鐘和秒都從0（零）開始。

那么該怎么辦？創(chuàng)建初始對象后，我可以輕松地從 JavaScript 更新屬性Date()。

但這樣動畫就會出錯，因為它們會運行相同的時間（每秒鐘 60 秒），即使實際的秒數(shù)小于該值。

我在 Twitter 上尋求幫助——幸運的是，Temani Afif 和 álvaro Montoro 回復(fù)了！解決方案是使用負(fù)數(shù) animation-delay。

因此，使用一些 JavaScript 來設(shè)置當(dāng)前時間并計算延遲：

const time = new Date();
const hours = time.getHours();
const minutes = time.getMinutes();
const seconds = time.getSeconds();

// Delays
const HOURS = -Math.abs((hours * 3600) + (minutes * 60) + seconds);
const MINS = -Math.abs((minutes * 60) + seconds);
const SECS = -Math.abs(seconds);

...我們可以更新之前指定的 CSS 屬性，例如：

node.style.setProperty(`--delay-seconds`, `${seconds}s`);

現(xiàn)在，我們有了一個可以工作的數(shù)字 CSS 時鐘——將其與此處的其他方法進(jìn)行比較：

如果您在開發(fā)工具中檢查標(biāo)記，您會發(fā)現(xiàn) CSS 版本并未重寫 DOM 內(nèi)容。

倒數(shù)

之后，我決定重新審視我的舊 Codepen，多語言倒計時，并制作一個純 CSS 版本：

locale如果您想要其他語言，您可以在 JS 代碼中使用：

但性能呢？CSS 可能不會像 JavaScript 那樣阻塞主線程，但我們能確定它使用 GPU 而不是 CPU 嗎？

有一個老技巧：

.useGpu {
  transform: translateZ(0);
  will-change: transform;
}

然后，在開發(fā)工具中，轉(zhuǎn)到“圖層”：

看到“倒計時”現(xiàn)在如何擁有自己的渲染層了嗎？不確定這是否仍然適用，但我猜添加也沒什么壞處。

離開瀏覽器選項卡

當(dāng)我離開瀏覽器選項卡并返回時，純 CSS 時鐘沒有出現(xiàn)任何問題。也許是我等的時間還不夠長吧！但如果您遇到任何問題，請使用此事件重新計算時鐘的延遲：

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) { ... }
})

模擬時鐘

作為獎勵 - 這是一個模擬時鐘，我不久前做了：

言

先貼上另一位開發(fā)者的原文地址，其實里面顯示的是2種風(fēng)格的時鐘，一種為傳統(tǒng)的掛鐘，一種為數(shù)字時鐘，我就分開來顯示了。這里再另外改了個不同背景色的方形時鐘，對于數(shù)字時鐘也進(jìn)行了改進(jìn)。

在最后會放出源碼，給喜歡研究的小伙伴一個參考。當(dāng)然咯，最好還是自己能實踐一下。

此教程版本是基于原文地址基礎(chǔ)上進(jìn)行小的修改而來，使用的是LESS的Mixin代碼方式，使得后期調(diào)整大小及顏色會更加方便，只需要調(diào)整不同參數(shù)即可。

如果你對LESS以及mixin不太了解，建議先學(xué)習(xí)基礎(chǔ)知識。less編譯css的軟件，推薦使用koala。

第一步，創(chuàng)建文件

結(jié)構(gòu)如上圖所示，CSS里創(chuàng)建style.less就可以了（編譯引用會生成css文件），另外創(chuàng)建resource文件夾，里面可以再創(chuàng)建mixin_clock.less（不需要編譯），文件起名可以根據(jù)自己的項目需求。clock.html中正常引用style.css文件就可以了。

把css目錄拖到koala軟件中，并且開啟style.less右邊的source map，這樣在瀏覽器上，f12可以看到對應(yīng)的代碼位置，方便調(diào)整。

style.less里的引用代碼，編譯后就可以自動生成同名.css文件了：

//公共文件夾根目錄
@resource_path: '../resource';
// 組件擴(kuò)展
@import '@{resource_path}/mixin_clock';

等以后resource里組件多的話，也可以單獨留一個引用的文件。接下來就可以正式開工了。

第二步，按原教程錄入內(nèi)容

原來的css樣式的部分，全都放在mixin_clock.less文件中，因為是引用并且一直在編譯的，所以都能正常顯示。

這里要提幾點順便的調(diào)整

1、border-radius，如果是正圓的，則改為50%，而不是具體的數(shù)值。

2、background: linear-gradient(top, #f9f9f9, #666)，里面的top，改為180deg，因為在部分chrome中可能會報錯，而具體的角度不會

3、有些div用了position: absolute，就順便加上z-index值，具體數(shù)字，根據(jù)層疊的前后進(jìn)行設(shè)置

4、將最后的數(shù)字時鐘和掛鐘拆分（如果你想和在一起的話，建議改為年月日可能更實用）

第三步，調(diào)整為LESS的結(jié)構(gòu)寫法

使用less有個好處就是不需要反復(fù)寫父級名稱，部分的修改基礎(chǔ)結(jié)構(gòu)如下：

// 表盤
    .frame_face {
      ...
      &:before {
        ...
     ｝
      &:before {
        ...
     ｝
   ｝

tips: 因為要集成到別的框架中，自己定義的名稱，建議統(tǒng)一改用下劃線，以作區(qū)分。

這里的&，相當(dāng)于.frame_face:before{}

第四步，提取公共部分，改為變量，并改成Mixin形式調(diào)用

這一步比較重要，這也是LESS比寫標(biāo)準(zhǔn)CSS最顯著的優(yōu)勢，當(dāng)然現(xiàn)在CSS也可以寫變量，但是遠(yuǎn)沒有LESS寫的方便。

將里面一些需要以后調(diào)整的都提取出來作為變量，我也大致羅列下調(diào)整的地方：

1、比如鐘的大小，如果調(diào)整的話，里面的大小也都需要跟著調(diào)整，所以上面提到最好是按百分比作為相對的數(shù)值，那么調(diào)整一個地方，相對的部分也能跟著進(jìn)行調(diào)整。

2、涉及到的顏色，比如背景色，文字顏色等。當(dāng)然咯這里涉及的地方比較多，并非所有的都需要提取出來，根據(jù)自己的需求即可。

3、倒角數(shù)值也可以取出來，比如最終需要一個方形的時鐘，那就改成數(shù)值就可以了。

4、改為Mixin版，以方便參數(shù)調(diào)用，為了便于區(qū)分，可以前綴加上mixin，格式參考：

.mixin_basic_clock(變量名1: 參數(shù); 變量名2: 參數(shù)){
  代碼部分1: 變量名1;
  代碼部分2: 變量名2;
}

第5步，JS更改為jQuery形式，并且改進(jìn)

其實這個改動不難，并且對數(shù)字時鐘增加了年月日周。

原來的每個公共的判斷方法提取出來，因為一般都是顯示2位數(shù)，原來的小于2位，就自動在前面加個“0”，改進(jìn)如下

function checkTime (i) {
 if (i < 10) {
i = "0" + i;
 }
return i;
 }
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);

最終代碼

clock.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>時鐘</title>
  <link href="../css/style.css" rel="stylesheet" />
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="../js/clock.js"></script>
</head>
<body>
  <div class="circle_clock">
    <!-- 圓形掛鐘表盤 -->
    <div class="frame_face">
      <!-- 刻度 -->
      <ul class="minute_marks"></ul>
      <!-- 刻度數(shù)字 -->
      <ul class="digits">
        <li>3</li>
        <li>5</li>
        <li>9</li>
        <li>12</li>
      </ul>
      <!-- 指針 -->
      <div class="hours_hand"></div>
      <div class="minutes_hand"></div>
      <div class="seconds_hand"></div>
      <!-- 指針中心點 -->
      <div class="clock_center"></div>
    </div>
  </div>
  <div class="squire_clock">
    <!-- 方形掛鐘表盤 -->
    <div class="frame_face">
      <!-- 刻度 -->
      <ul class="minute_marks"></ul>
      <!-- 刻度數(shù)字 -->
      <ul class="digits">
        <li>3</li>
        <li>6</li>
        <li>9</li>
        <li>12</li>
      </ul>
      <!-- 指針 -->
      <div class="hours_hand"></div>
      <div class="minutes_hand"></div>
      <div class="seconds_hand"></div>
      <!-- 指針中心點 -->
      <div class="clock_center"></div>
    </div>
  </div>
  <br>
  <br>
  <!-- 數(shù)字時鐘 -->
  <div class="digital_clock">
    <div class="digit_ymd num"></div>
    <div class="digit_hms num"></div>
  </div>
</body>
</html>

mixin_clock.less

//傳統(tǒng)掛鐘
//@clock_wh: 鐘的寬度/高度
//@clock_border: 鐘的邊框，50%為圓形，也可以設(shè)置成具體數(shù)值
//@frame_bgc1: 表盤背景漸變色1
//@frame_bgc2: 表盤背景漸變色2
//@mm_bgc: 刻度背景色
//@digits_c: 表盤數(shù)字文字顏色
//@hh_bgc: 時針背景顏色
//@mh_bgc：分針背景顏色
//@sh_bgc：秒針背景顏色
.mixin_basic_clock(@clock_wh: 30em; @clock_border: 50%; @frame_bgc1:#fff; @frame_bgc2:#ccc; @mm_bgc: #666; @digits_c: #555; @hh_bgc:#232425; @mh_bgc: #343536; @sh_bgc: #c00) {
    //@digits: 表盤文字中心距離
    //@digits_s: 表盤文字大小
    //@clock_center: 表盤中心大小
    @digits: @clock_wh / 4.2;
    @digits_s: @clock_wh / 20;
    @clock_center: @clock_wh / 8;
    // 表盤
    .frame_face {
        position: relative;
        width: @clock_wh;
        height: @clock_wh;
        border-radius: @clock_border;
        background: linear-gradient(180deg, #f9f9f9, #666);
        box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
        &:before {
            content: '';
            width: @clock_wh * 0.98;
            height: @clock_wh * 0.98;
            border-radius: @clock_border;
            position: absolute;
            top: @clock_wh * 0.01;
            left: @clock_wh * 0.01;
            background: radial-gradient(
                ellipse at center,
                rgba(246, 248, 249, 1) 0%,
                rgba(229, 235, 238, 1) 65%,
                rgba(205, 212, 217, 1) 66%,
                rgba(245, 247, 249, 1) 100%
            );
        }
        &:after {
            content: '';
            width: @clock_wh * 0.94;
            height: @clock_wh * 0.94;
            border-radius: @clock_border;
            position: absolute;
            top: @clock_wh * 0.03;
            left: @clock_wh * 0.03;
            box-shadow: inset rgba(0, 0, 0, 0.2) 0.2em 0.2em 1em;
            // border: (@clock_wh * 0.001) solid rgba(0, 0, 0, 0.2);
            background: linear-gradient(180deg, @frame_bgc1, @frame_bgc2);
        }
    }
    // 刻度
    .minute_marks li {
        display: block;
        width: 0.2em;
        height: 0.6em;
        background: @mm_bgc;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -0.4em 0 0 -0.1em;
        z-index: 8;
    }
    // 刻度數(shù)字
    .digits {
        width: @clock_wh;
        height: @clock_wh;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@clock_wh / 2;
        margin-left: -@clock_wh / 2;
        padding: 0;
        z-index: 9;
        li {
            font-size: @digits_s;
            display: block;
            width: @digits_s;
            height: @digits_s;
            position: absolute;
            top: 50%;
            left: 50%;
            line-height: @digits_s;
            text-align: center;
            margin: (-@digits_s / 2) 0 0 (-@digits_s / 2);
            font-weight: bold;
            color: darken(@digits_c, 10%);
            &:nth-child(1) {
                transform: translate(@digits, 0);
            }
            &:nth-child(2) {
                transform: translate(0, @digits);
            }
            &:nth-child(3) {
                transform: translate(-@digits, 0);
            }
            &:nth-child(4) {
                transform: translate(0, -@digits);
            }
        }
    }
    // 時針
    .hours_hand {
        width: 0.8em;
        height: 7em;
        border-radius: 0 0 0.9em 0.9em;
        background: @hh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -0.8em -0.4em;
        box-shadow: @hh_bgc 0 0 2px;
        transform-origin: 0.4em 6.2em;
        transform: rotate(-25deg);
        z-index: 21;
        &:before {
            content: '';
            background: inherit;
            width: 1.8em;
            height: 0.8em;
            border-radius: 0 0 0.8em 0.8em;
            box-shadow: @hh_bgc 0 0 1px;
            position: absolute;
            top: -0.7em;
            left: -0.5em;
        }
        &:after {
            content: '';
            width: 0;
            height: 0;
            border: 0.9em solid @hh_bgc;
            border-width: 0 0.9em 2.4em 0.9em;
            border-left-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: -3.1em;
            left: -0.5em;
        }
    }
    // 分針
    .minutes_hand {
        width: 0.6em;
        height: 12.5em;
        border-radius: 0.5em;
        background: @mh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -1.5em -0.3em;
        box-shadow: @mh_bgc 0 0 2px;
        transform-origin: 0.3em 11em;
        z-index: 22;
    }
    // 秒針
    .seconds_hand {
        width: 0.2em;
        height: 14em;
        border-radius: ~'0.1em 0.1em 0 0 / 10em 10em 0 0';
        background: @sh_bgc;
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin: 0 0 -2em -0.1em;
        box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em;
        transform-origin: 0.1em 12em;
        z-index: 23;
        &:before {
            content: '';
            width: 0.6em;
            height: 3em;
            border-radius: ~'0.2em 0.2em 0.4em 0.4em / 0.2em 0.2em 2em 2em';
            box-shadow: rgba(0, 0, 0, 0.8) 0 0 0.2em;
            background: inherit;
            position: absolute;
            left: 50%;
            bottom: -3em;
            margin-left: -0.3em;
        }
        &:after {
            content: '';
            width: 1em;
            height: 1em;
            border-radius: 50%;
            background: inherit;
            position: absolute;
            left: 50%;
            bottom: 1.5em;
            margin-left: -0.5em;
        }
    }
    //中心點
    .clock_center {
        &:before {
            content: '';
            width: 1.6em;
            height: 1.6em;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -0.8em 0 0 -0.8em;
            background: #121314;
            z-index: 10;
        }
        &:after {
            content: '';
            width: @clock_center;
            height: @clock_center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: (-@clock_center / 2) 0 0 (-@clock_center / 2);
            border: 0.1em solid #c6c6c6;
            background: radial-gradient(
                ellipse at center,
                rgba(200, 200, 200, 0),
                rgba(190, 190, 190, 1) 90%,
                rgba(130, 130, 130, 1) 100%
            );
            z-index: 11;
        }
    }
}

// 數(shù)字時鐘
//@clock_w: 時鐘寬度
//@clock_fs1: 文字大小1
//@clock_fs2: 文字大小2
//@clock_bgc1: 時鐘背景色1
//@clock_bgc2: 時鐘背景色2
//@clock_fc: 時鐘文字顏色
.mixin_digital_clock(@clock_w: 30em; @clock_fs1: 2em; @clock_fs2: 5em; @clock_bgc1:#0a2e38; @clock_bgc2:#000; @clock_fc: #daf6ff) {
    width: @clock_w;
    border-radius: 0.6em;
    padding: 1em;
    overflow: hidden;
    background: @clock_bgc1;
    background: radial-gradient(ellipse at center, @clock_bgc1 0%, @clock_bgc2 70%);
    .num {
        padding: 0.1em;
        color: @clock_fc;
        text-align: center;
        word-break: keep-all;
        letter-spacing: 0.05em;
        font-family: 'Share Tech Mono', Consolas, monaco, monospace;
        text-shadow: ~'0 0 20px #0aafe6, 0 0 20px rgb(10 175 230 / 0%)';
    }
    .digit_ymd {
        font-size: @clock_fs1;
    }
    .digit_hms {
        font-size: @clock_fs2;
    }
}

style.less

//公共文件夾根目錄
@resource_path: '../resource';
// 組件擴(kuò)展
@import '@{resource_path}/mixin_clock';

//圓形掛鐘
.circle_clock {
    .mixin_basic_clock();
    display: inline-block;
    margin: 2em;
}

//方形掛鐘
.squire_clock {
    .mixin_basic_clock(@clock_border: 2em; @frame_bgc1:#90bef3; @frame_bgc2:#616fad; @mm_bgc: #333;);
    display: inline-block;
    margin: 2em;
}

//數(shù)字時鐘
.digital_clock {
    .mixin_digital_clock();
    margin: 2em;
}

clock.js

window.onload = function () {
  // 生成刻度
  var markWrap = $('.minute_marks');
  for (index = 0; index < 60; index++) {
    var markItem = $('<li></li>');
    markItem.css("transform", "rotate(" + index * 6 + "deg) translateY(-12.7em)");
    if (index % 5 == 0) {
      markItem.css({ "width": "0.3em", "height": "1em" });
    }
    markWrap.append(markItem);
  }

  setInterval(function () {
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth() + 1;
    var date = today.getDate();
    var week = "星期" + "日一二三四五六".split(/(?!\b)/)[today.getDay()];
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();
    var hournum;
    // 指針轉(zhuǎn)動
    if (hour > 12) {
      hournum = ((hour - 12) + minute / 60) * 30;
    } else {
      hournum = (hour + minute / 60) * 30;
    }
    var minnum = (minute + second / 60) * 6 + second / 60;
    var sennum = second * 6;
    $('.hours_hand').css('transform', 'rotate(' + hournum + 'deg)');
    $('.minutes_hand').css('transform', 'rotate(' + minnum + 'deg)');
    $('.seconds_hand').css('transform', 'rotate(' + sennum + 'deg)');

    // 數(shù)字時鐘
    function checkTime (i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
    month = checkTime(month);
    date = checkTime(date);
    hour = checkTime(hour);
    minute = checkTime(minute);
    second = checkTime(second);
    $('.digit_ymd').text(year + '/' + month + '/' + date + ' ' + week);
    $('.digit_hms').text(hour + ':' + minute + ':' + second);
  }, 1000);
}

時鐘的樣式還可以有更豐富的方法，比如給掛鐘加個背景，8字形的數(shù)字時鐘等等，可以在原有引用mixin之后再自己加樣式覆蓋，更多創(chuàng)意等待你的發(fā)現(xiàn)

在線咨詢

上一篇：JavaScript 語句
下一篇：程序員的開源月刊《HelloGitHub》第 68 期