feat(milliseconds): 支持毫秒倒计时 (#6)

Author: shoyuf

docs/format.md

@@ -2,6 +2,6 @@ custom output format
 
 ```vue
 <template>
-  <count-down :seconds="59" :days="1" format="dd天 hh:mm:ss" />
+  <count-down :seconds="59" :days="1" format="dd天 hh:mm:ss.ms" />
 </template>
 ```

src/count-down.vue

@@ -38,6 +38,13 @@ export default {
       type: Number,
       default: 0
     },
+    /**
+     * remain milliseconds
+     */
+    milliseconds: {
+      type: Number,
+      default: 0
+    },
     /**
      * whether autoplay or not
      */
@@ -47,13 +54,13 @@ export default {
     },
     /**
      * Output format.
-     * Default: 'dd 天 hh 时 mm 分 ss 秒'. These dd, hh, mm & ss specifiers are optional.
-     * The default value will change according to whether there are days, hours, minutes & seconds,
+     * Default: 'dd 天 hh 时 mm 分 ss 秒'. These dd, hh, mm, ss & ms specifiers are optional.
+     * The default value will change according to whether there are days, hours, minutes, seconds & milliseconds,
      * e.g., if user just pass minutes, then the default value will be 'mm 分 ss 秒'
      *
      * 输出格式。
-     * 默认值：'dd 天 hh 时 mm 分 ss 秒'。dd、hh、mm和ss标识符都是可选的。
-     * 默认值会根据是否传入days, hours, minutes, seconds而变化，
+     * 默认值：'dd 天 hh 时 mm 分 ss 秒'。dd、hh、mm、ss 和 ms 标识符都是可选的。
+     * 默认值会根据是否传入days, hours, minutes, seconds 和 milliseconds而变化，
      * 比如用户只传了minutes，那么默认值就变为'mm 分 ss 秒'
      */
     format: {

src/util.js

@@ -3,13 +3,15 @@ const formatSpecifiers = {
   days: 'dd',
   hours: 'hh',
   minutes: 'mm',
-  seconds: 'ss'
+  seconds: 'ss',
+  milliseconds: 'ms'
 }
-const secondsIn = {
-  days: 60 * 60 * 24,
-  hours: 60 * 60,
-  minutes: 60,
-  seconds: 1
+const millisecondsIn = {
+  days: 60 * 60 * 24 * 1000,
+  hours: 60 * 60 * 1000,
+  minutes: 60 * 1000,
+  seconds: 1 * 1000,
+  milliseconds: 1
 }
 
 /**
@@ -34,8 +36,23 @@ function padStart(str, len, v) {
   return str
 }
 
-function padZero(str) {
-  return padStart(str + '', 2, '0')
+function padZero(str, padRange = 2) {
+  return padStart(str + '', padRange, '0')
+}
+
+/**
+ * 天、小时、分钟、秒、毫秒格式化
+ * @param {string} key
+ * @param {number} value
+ * @returns {string}
+ */
+function timeFormatter(key, value) {
+  // 天、时、分、秒两位，毫秒三位
+  if (key === 'milliseconds') {
+    return padZero(value, 3)
+  } else {
+    return padZero(value)
+  }
 }
 
 export function toMilliseconds({
@@ -55,13 +72,12 @@ export function toMilliseconds({
  */
 export function formatTime(time, format) {
   let result = format
-  time = Math.ceil(time / 1000)
   // 注意顺序很重要。要先从大的时间单位开始构造字符串
   entries(formatSpecifiers).forEach(([k, specifier]) => {
     if (includes(result, specifier)) {
-      const v = Math.floor(time / secondsIn[k])
-      time -= v * secondsIn[k]
-      result = result.replace(specifier, padZero(v))
+      const v = Math.floor(time / millisecondsIn[k])
+      time -= v * millisecondsIn[k]
+      result = result.replace(specifier, timeFormatter(k, v))
     }
   })
   return result
@@ -73,9 +89,8 @@ export function formatTime(time, format) {
  * @return 数据对象，包含days, hours, minutes, seconds & milliseconds字段
  */
 export function toTimeData(time) {
-  const timeData = {milliseconds: time % 1000}
-  time /= 1000
-  entries(secondsIn).forEach(([k, v]) => {
+  const timeData = {}
+  entries(millisecondsIn).forEach(([k, v]) => {
     timeData[k] = Math.floor(time / v)
     time -= timeData[k] * v
   })

test/util.test.js

@@ -1,21 +1,23 @@
 import {formatTime, toTimeData, toMilliseconds} from '../src/util'
 
 describe('formatTime', () => {
-  test('正确解析日时分秒', () => {
+  test('正确解析日时分秒毫秒', () => {
     const t = toMilliseconds({
       days: 2,
       hours: 3,
       minutes: 4,
-      seconds: 5
+      seconds: 5,
+      milliseconds: 1
     })
-    expect(formatTime(t, 'ddhhmmss')).toBe('02030405')
+    expect(formatTime(t, 'ddhhmmssms')).toBe('02030405001')
     const t2 = toMilliseconds({
       days: 2,
       hours: 33,
       minutes: 4,
-      seconds: -5
+      seconds: -5,
+      milliseconds: 1
     })
-    expect(formatTime(t2, 'ddhhmmss')).toBe('03090355')
+    expect(formatTime(t2, 'ddhhmmssms')).toBe('03090355001')
   })
   test('format仅传部分占位符的情况', () => {
     const t = toMilliseconds({