Project - Moment.js Cheat Sheet

Demo

簡介

顯示 Moment.js 中常用的時間方法以及執行結果。

使用工具或技術

Moment.js

過程

一開始只是單純記下練習過的 moment.js 方法，並且對照執行後的結果，所以程式碼寫得很隨興。

HTML 部分

html

1
2
3

<ul>
    <li id="now">moment();li>
ul>

JavaScript 部分

javascript

1 2	var now = moment(); document.getElementById('now').after(now);

後來官方文件看著看著，試過的方法越來越多，就想說來分類一下好了，於是就變這樣：

HTML 部分

html

<div class="wrap">
  <h3>Nowh3>
  <ul>
    <li id="now">moment();li>
    <li id="nowF">moment().format();li>
    <li id="nowF1">moment().format("YYYY/MM/DD HH:mm:ss dddd");li>
    <li id="nowF2">moment().format("MMMM Do YYYY, h:mm:ss a");li>
    <li id="nowF3">moment().format("[今天是] YYYY [年中的第] DDD [天]");li>
  ul>
div>

JavaScript 部分

javascript

// 當下的時間
var now = moment();
document.getElementById('now').after(now);

// 使用 format 改變格式
var nowF = moment().format();
document.getElementById('nowF').after(nowF);

var nowF1 = moment().format('YYYY/MM/DD HH:mm:ss dddd');
document.getElementById('nowF1').after(nowF1);

var nowF2 = moment().format('MMMM Do YYYY, h:mm:ss a');
document.getElementById('nowF2').after(nowF2);

var nowF3 = moment().format('[今天是] YYYY [年中的第] DDD [天]');
document.getElementById('nowF3').after(nowF3);

程式碼越來越長之後，覺得這樣土法煉鋼地複製貼上修改很沒有效率。只是，因為一開始只想單純開個檔案練習並且記錄自己練了些什麼，練完存在本機以便未來對照筆記翻看及測試，所以採用這種比較直覺又沒效率的方式。雖然想改，但累積的程式碼已經不少，所以乾脆就繼續用這樣的模式繼續進行下去了。

不過，自己花了那麼多時間，也累積了不少 moment.js 的方法和結果，就這樣跟其他的練習檔案推在一起總覺得可惜。於是加上 CSS 並稍微排版，把它變成一個 moment.js 時間處理方法的速查表，方便以後查閱。