time-runner 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -1
- package/dist/TimeRunner.d.ts +2 -0
- package/dist/index.css +1 -0
- package/dist/time-runner.es.js +187 -186
- package/dist/time-runner.umd.js +2 -1
- package/package.json +3 -2
- package/dist/time-runner.css +0 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
地址：[功能演示-demo](http://showscene.cn/react-demo/clock)
|
|
6
|
+
|
|
5
7
|
这是一个展示时间、计时、倒计时的组件。
|
|
6
8
|
基于 React 开发。 主要功能包括：
|
|
7
9
|
- 展示当前时间
|
|
@@ -22,7 +24,8 @@ yarn add time-runner
|
|
|
22
24
|
## 页面引入
|
|
23
25
|
```jsx
|
|
24
26
|
import { TimeRunner } from "time-runner";
|
|
25
|
-
|
|
27
|
+
// 1.0.3 版本开始，不需要引入css文件了
|
|
28
|
+
// import "time-runner/dist/time-runner.css";
|
|
26
29
|
```
|
|
27
30
|
|
|
28
31
|
## 使用说明
|
|
@@ -86,6 +89,8 @@ className?: string;
|
|
|
86
89
|
bgColor?: string;
|
|
87
90
|
/** 边框颜色 */
|
|
88
91
|
borderColor?: string;
|
|
92
|
+
/** 文字阴影颜色值 */
|
|
93
|
+
textShadowColor?: string;
|
|
89
94
|
```
|
|
90
95
|
|
|
91
96
|
### 倒计时传入日期的格式
|
|
@@ -107,11 +112,22 @@ borderColor?: string;
|
|
|
107
112
|
|
|
108
113
|
# 更新日志
|
|
109
114
|
|
|
115
|
+
## [1.0.4] - 2025-11-16
|
|
116
|
+
### 更新内容
|
|
117
|
+
- 更新Readme内容
|
|
118
|
+
|
|
119
|
+
## [1.0.3] - 2025-11-16
|
|
120
|
+
### 更新内容
|
|
121
|
+
- 增加 textShadowColor（文字阴影颜色）属性
|
|
122
|
+
- 更新Readme内容，增加功能演示地址。
|
|
123
|
+
|
|
124
|
+
|
|
110
125
|
## [1.0.2] - 2025-10-11
|
|
111
126
|
### 更新内容
|
|
112
127
|
- 增加 mode = "drift" 效果
|
|
113
128
|
- 更新Readme内容
|
|
114
129
|
|
|
130
|
+
|
|
115
131
|
## [1.0.1] - 2025-10-07
|
|
116
132
|
### 更新内容
|
|
117
133
|
- 更新readme内容
|
package/dist/TimeRunner.d.ts
CHANGED
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
|
package/dist/time-runner.es.js
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
import { jsx as o, Fragment as
|
|
2
|
-
import { memo as ft, useState as ct, useRef as lt, useMemo as ht, useEffect as
|
|
3
|
-
function mt(
|
|
4
|
-
return
|
|
1
|
+
import { jsx as o, Fragment as rt, jsxs as A } from "react/jsx-runtime";
|
|
2
|
+
import { memo as ft, useState as ct, useRef as lt, useMemo as ht, useEffect as K } from "react";
|
|
3
|
+
import './index.css';function mt($) {
|
|
4
|
+
return $ && $.__esModule && Object.prototype.hasOwnProperty.call($, "default") ? $.default : $;
|
|
5
5
|
}
|
|
6
|
-
var
|
|
7
|
-
function
|
|
8
|
-
return it || (it = 1, (function(
|
|
9
|
-
(function(d,
|
|
10
|
-
|
|
6
|
+
var G = { exports: {} }, $t = G.exports, it;
|
|
7
|
+
function pt() {
|
|
8
|
+
return it || (it = 1, (function($, l) {
|
|
9
|
+
(function(d, h) {
|
|
10
|
+
$.exports = h();
|
|
11
11
|
})($t, (function() {
|
|
12
|
-
var d = 1e3,
|
|
12
|
+
var d = 1e3, h = 6e4, Y = 36e5, g = "millisecond", _ = "second", S = "minute", O = "hour", b = "day", p = "week", f = "month", Z = "quarter", H = "year", M = "date", k = "Invalid Date", E = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, J = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, tt = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
|
|
13
13
|
var r = ["th", "st", "nd", "rd"], t = s % 100;
|
|
14
14
|
return "[" + s + (r[(t - 20) % 10] || r[t] || r[0]) + "]";
|
|
15
|
-
} },
|
|
15
|
+
} }, w = function(s, r, t) {
|
|
16
16
|
var n = String(s);
|
|
17
17
|
return !n || n.length >= r ? s : "" + Array(r + 1 - n.length).join(t) + s;
|
|
18
|
-
},
|
|
18
|
+
}, q = { s: w, z: function(s) {
|
|
19
19
|
var r = -s.utcOffset(), t = Math.abs(r), n = Math.floor(t / 60), e = t % 60;
|
|
20
|
-
return (r <= 0 ? "+" : "-") +
|
|
20
|
+
return (r <= 0 ? "+" : "-") + w(n, 2, "0") + ":" + w(e, 2, "0");
|
|
21
21
|
}, m: function s(r, t) {
|
|
22
22
|
if (r.date() < t.date()) return -s(t, r);
|
|
23
|
-
var n = 12 * (t.year() - r.year()) + (t.month() - r.month()), e = r.clone().add(n,
|
|
23
|
+
var n = 12 * (t.year() - r.year()) + (t.month() - r.month()), e = r.clone().add(n, f), i = t - e < 0, a = r.clone().add(n + (i ? -1 : 1), f);
|
|
24
24
|
return +(-(n + (t - e) / (i ? e - a : a - e)) || 0);
|
|
25
25
|
}, a: function(s) {
|
|
26
26
|
return s < 0 ? Math.ceil(s) || 0 : Math.floor(s);
|
|
27
27
|
}, p: function(s) {
|
|
28
|
-
return { M:
|
|
28
|
+
return { M: f, y: H, w: p, d: b, D: M, h: O, m: S, s: _, ms: g, Q: Z }[s] || String(s || "").toLowerCase().replace(/s$/, "");
|
|
29
29
|
}, u: function(s) {
|
|
30
30
|
return s === void 0;
|
|
31
|
-
} },
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
return s instanceof
|
|
35
|
-
},
|
|
31
|
+
} }, C = "en", j = {};
|
|
32
|
+
j[C] = tt;
|
|
33
|
+
var P = "$isDayjsObject", et = function(s) {
|
|
34
|
+
return s instanceof B || !(!s || !s[P]);
|
|
35
|
+
}, X = function s(r, t, n) {
|
|
36
36
|
var e;
|
|
37
|
-
if (!r) return
|
|
37
|
+
if (!r) return C;
|
|
38
38
|
if (typeof r == "string") {
|
|
39
39
|
var i = r.toLowerCase();
|
|
40
|
-
|
|
40
|
+
j[i] && (e = i), t && (j[i] = t, e = i);
|
|
41
41
|
var a = r.split("-");
|
|
42
42
|
if (!e && a.length > 1) return s(a[0]);
|
|
43
43
|
} else {
|
|
44
44
|
var c = r.name;
|
|
45
|
-
|
|
45
|
+
j[c] = r, e = c;
|
|
46
46
|
}
|
|
47
|
-
return !n && e && (
|
|
47
|
+
return !n && e && (C = e), e || !n && C;
|
|
48
48
|
}, D = function(s, r) {
|
|
49
|
-
if (
|
|
49
|
+
if (et(s)) return s.clone();
|
|
50
50
|
var t = typeof r == "object" ? r : {};
|
|
51
|
-
return t.date = s, t.args = arguments, new
|
|
52
|
-
}, u =
|
|
53
|
-
u.l =
|
|
51
|
+
return t.date = s, t.args = arguments, new B(t);
|
|
52
|
+
}, u = q;
|
|
53
|
+
u.l = X, u.i = et, u.w = function(s, r) {
|
|
54
54
|
return D(s, { locale: r.$L, utc: r.$u, x: r.$x, $offset: r.$offset });
|
|
55
55
|
};
|
|
56
|
-
var
|
|
56
|
+
var B = (function() {
|
|
57
57
|
function s(t) {
|
|
58
|
-
this.$L =
|
|
58
|
+
this.$L = X(t.locale, null, !0), this.parse(t), this.$x = this.$x || t.x || {}, this[P] = !0;
|
|
59
59
|
}
|
|
60
60
|
var r = s.prototype;
|
|
61
61
|
return r.parse = function(t) {
|
|
@@ -65,10 +65,10 @@ function Mt() {
|
|
|
65
65
|
if (u.u(e)) return /* @__PURE__ */ new Date();
|
|
66
66
|
if (e instanceof Date) return new Date(e);
|
|
67
67
|
if (typeof e == "string" && !/Z$/i.test(e)) {
|
|
68
|
-
var a = e.match(
|
|
68
|
+
var a = e.match(E);
|
|
69
69
|
if (a) {
|
|
70
|
-
var c = a[2] - 1 || 0,
|
|
71
|
-
return i ? new Date(Date.UTC(a[1], c, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0,
|
|
70
|
+
var c = a[2] - 1 || 0, m = (a[7] || "0").substring(0, 3);
|
|
71
|
+
return i ? new Date(Date.UTC(a[1], c, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, m)) : new Date(a[1], c, a[3] || 1, a[4] || 0, a[5] || 0, a[6] || 0, m);
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
return new Date(e);
|
|
@@ -79,7 +79,7 @@ function Mt() {
|
|
|
79
79
|
}, r.$utils = function() {
|
|
80
80
|
return u;
|
|
81
81
|
}, r.isValid = function() {
|
|
82
|
-
return this.$d.toString() !==
|
|
82
|
+
return this.$d.toString() !== k;
|
|
83
83
|
}, r.isSame = function(t, n) {
|
|
84
84
|
var e = D(t);
|
|
85
85
|
return this.startOf(n) <= e && e <= this.endOf(n);
|
|
@@ -94,40 +94,40 @@ function Mt() {
|
|
|
94
94
|
}, r.valueOf = function() {
|
|
95
95
|
return this.$d.getTime();
|
|
96
96
|
}, r.startOf = function(t, n) {
|
|
97
|
-
var e = this, i = !!u.u(n) || n, a = u.p(t), c = function(
|
|
98
|
-
var
|
|
99
|
-
return i ?
|
|
100
|
-
},
|
|
101
|
-
return u.w(e.toDate()[
|
|
102
|
-
}, v = this.$W,
|
|
97
|
+
var e = this, i = !!u.u(n) || n, a = u.p(t), c = function(I, x) {
|
|
98
|
+
var L = u.w(e.$u ? Date.UTC(e.$y, x, I) : new Date(e.$y, x, I), e);
|
|
99
|
+
return i ? L : L.endOf(b);
|
|
100
|
+
}, m = function(I, x) {
|
|
101
|
+
return u.w(e.toDate()[I].apply(e.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(x)), e);
|
|
102
|
+
}, v = this.$W, y = this.$M, T = this.$D, F = "set" + (this.$u ? "UTC" : "");
|
|
103
103
|
switch (a) {
|
|
104
|
-
case p:
|
|
105
|
-
return i ? c(1, 0) : c(31, 11);
|
|
106
|
-
case m:
|
|
107
|
-
return i ? c(1, g) : c(0, g + 1);
|
|
108
|
-
case h:
|
|
109
|
-
var L = this.$locale().weekStart || 0, V = (v < L ? v + 7 : v) - L;
|
|
110
|
-
return c(i ? T - V : T + (6 - V), g);
|
|
111
104
|
case H:
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
return i ? c(1, 0) : c(31, 11);
|
|
106
|
+
case f:
|
|
107
|
+
return i ? c(1, y) : c(0, y + 1);
|
|
108
|
+
case p:
|
|
109
|
+
var N = this.$locale().weekStart || 0, R = (v < N ? v + 7 : v) - N;
|
|
110
|
+
return c(i ? T - R : T + (6 - R), y);
|
|
111
|
+
case b:
|
|
112
|
+
case M:
|
|
113
|
+
return m(F + "Hours", 0);
|
|
114
114
|
case O:
|
|
115
|
-
return
|
|
116
|
-
case
|
|
117
|
-
return
|
|
115
|
+
return m(F + "Minutes", 1);
|
|
116
|
+
case S:
|
|
117
|
+
return m(F + "Seconds", 2);
|
|
118
118
|
case _:
|
|
119
|
-
return
|
|
119
|
+
return m(F + "Milliseconds", 3);
|
|
120
120
|
default:
|
|
121
121
|
return this.clone();
|
|
122
122
|
}
|
|
123
123
|
}, r.endOf = function(t) {
|
|
124
124
|
return this.startOf(t, !1);
|
|
125
125
|
}, r.$set = function(t, n) {
|
|
126
|
-
var e, i = u.p(t), a = "set" + (this.$u ? "UTC" : ""), c = (e = {}, e[
|
|
127
|
-
if (i ===
|
|
128
|
-
var v = this.clone().set(
|
|
129
|
-
v.$d[c](
|
|
130
|
-
} else c && this.$d[c](
|
|
126
|
+
var e, i = u.p(t), a = "set" + (this.$u ? "UTC" : ""), c = (e = {}, e[b] = a + "Date", e[M] = a + "Date", e[f] = a + "Month", e[H] = a + "FullYear", e[O] = a + "Hours", e[S] = a + "Minutes", e[_] = a + "Seconds", e[g] = a + "Milliseconds", e)[i], m = i === b ? this.$D + (n - this.$W) : n;
|
|
127
|
+
if (i === f || i === H) {
|
|
128
|
+
var v = this.clone().set(M, 1);
|
|
129
|
+
v.$d[c](m), v.init(), this.$d = v.set(M, Math.min(this.$D, v.daysInMonth())).$d;
|
|
130
|
+
} else c && this.$d[c](m);
|
|
131
131
|
return this.init(), this;
|
|
132
132
|
}, r.set = function(t, n) {
|
|
133
133
|
return this.clone().$set(t, n);
|
|
@@ -136,32 +136,32 @@ function Mt() {
|
|
|
136
136
|
}, r.add = function(t, n) {
|
|
137
137
|
var e, i = this;
|
|
138
138
|
t = Number(t);
|
|
139
|
-
var a = u.p(n), c = function(
|
|
139
|
+
var a = u.p(n), c = function(y) {
|
|
140
140
|
var T = D(i);
|
|
141
|
-
return u.w(T.date(T.date() + Math.round(
|
|
141
|
+
return u.w(T.date(T.date() + Math.round(y * t)), i);
|
|
142
142
|
};
|
|
143
|
-
if (a ===
|
|
144
|
-
if (a ===
|
|
145
|
-
if (a ===
|
|
146
|
-
if (a ===
|
|
147
|
-
var
|
|
143
|
+
if (a === f) return this.set(f, this.$M + t);
|
|
144
|
+
if (a === H) return this.set(H, this.$y + t);
|
|
145
|
+
if (a === b) return c(1);
|
|
146
|
+
if (a === p) return c(7);
|
|
147
|
+
var m = (e = {}, e[S] = h, e[O] = Y, e[_] = d, e)[a] || 1, v = this.$d.getTime() + t * m;
|
|
148
148
|
return u.w(v, this);
|
|
149
149
|
}, r.subtract = function(t, n) {
|
|
150
150
|
return this.add(-1 * t, n);
|
|
151
151
|
}, r.format = function(t) {
|
|
152
152
|
var n = this, e = this.$locale();
|
|
153
|
-
if (!this.isValid()) return e.invalidDate ||
|
|
154
|
-
var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = u.z(this), c = this.$H,
|
|
155
|
-
return
|
|
156
|
-
},
|
|
157
|
-
return u.s(c % 12 || 12,
|
|
158
|
-
},
|
|
159
|
-
var
|
|
160
|
-
return
|
|
153
|
+
if (!this.isValid()) return e.invalidDate || k;
|
|
154
|
+
var i = t || "YYYY-MM-DDTHH:mm:ssZ", a = u.z(this), c = this.$H, m = this.$m, v = this.$M, y = e.weekdays, T = e.months, F = e.meridiem, N = function(x, L, z, Q) {
|
|
155
|
+
return x && (x[L] || x(n, i)) || z[L].slice(0, Q);
|
|
156
|
+
}, R = function(x) {
|
|
157
|
+
return u.s(c % 12 || 12, x, "0");
|
|
158
|
+
}, I = F || function(x, L, z) {
|
|
159
|
+
var Q = x < 12 ? "AM" : "PM";
|
|
160
|
+
return z ? Q.toLowerCase() : Q;
|
|
161
161
|
};
|
|
162
|
-
return i.replace(
|
|
163
|
-
return
|
|
164
|
-
switch (
|
|
162
|
+
return i.replace(J, (function(x, L) {
|
|
163
|
+
return L || (function(z) {
|
|
164
|
+
switch (z) {
|
|
165
165
|
case "YY":
|
|
166
166
|
return String(n.$y).slice(-2);
|
|
167
167
|
case "YYYY":
|
|
@@ -171,9 +171,9 @@ function Mt() {
|
|
|
171
171
|
case "MM":
|
|
172
172
|
return u.s(v + 1, 2, "0");
|
|
173
173
|
case "MMM":
|
|
174
|
-
return
|
|
174
|
+
return N(e.monthsShort, v, T, 3);
|
|
175
175
|
case "MMMM":
|
|
176
|
-
return
|
|
176
|
+
return N(T, v);
|
|
177
177
|
case "D":
|
|
178
178
|
return n.$D;
|
|
179
179
|
case "DD":
|
|
@@ -181,27 +181,27 @@ function Mt() {
|
|
|
181
181
|
case "d":
|
|
182
182
|
return String(n.$W);
|
|
183
183
|
case "dd":
|
|
184
|
-
return
|
|
184
|
+
return N(e.weekdaysMin, n.$W, y, 2);
|
|
185
185
|
case "ddd":
|
|
186
|
-
return
|
|
186
|
+
return N(e.weekdaysShort, n.$W, y, 3);
|
|
187
187
|
case "dddd":
|
|
188
|
-
return
|
|
188
|
+
return y[n.$W];
|
|
189
189
|
case "H":
|
|
190
190
|
return String(c);
|
|
191
191
|
case "HH":
|
|
192
192
|
return u.s(c, 2, "0");
|
|
193
193
|
case "h":
|
|
194
|
-
return
|
|
194
|
+
return R(1);
|
|
195
195
|
case "hh":
|
|
196
|
-
return
|
|
196
|
+
return R(2);
|
|
197
197
|
case "a":
|
|
198
|
-
return
|
|
198
|
+
return I(c, m, !0);
|
|
199
199
|
case "A":
|
|
200
|
-
return
|
|
200
|
+
return I(c, m, !1);
|
|
201
201
|
case "m":
|
|
202
|
-
return String(
|
|
202
|
+
return String(m);
|
|
203
203
|
case "mm":
|
|
204
|
-
return u.s(
|
|
204
|
+
return u.s(m, 2, "0");
|
|
205
205
|
case "s":
|
|
206
206
|
return String(n.$s);
|
|
207
207
|
case "ss":
|
|
@@ -212,50 +212,50 @@ function Mt() {
|
|
|
212
212
|
return a;
|
|
213
213
|
}
|
|
214
214
|
return null;
|
|
215
|
-
})(
|
|
215
|
+
})(x) || a.replace(":", "");
|
|
216
216
|
}));
|
|
217
217
|
}, r.utcOffset = function() {
|
|
218
218
|
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
|
|
219
219
|
}, r.diff = function(t, n, e) {
|
|
220
|
-
var i, a = this, c = u.p(n),
|
|
221
|
-
return u.m(a,
|
|
220
|
+
var i, a = this, c = u.p(n), m = D(t), v = (m.utcOffset() - this.utcOffset()) * h, y = this - m, T = function() {
|
|
221
|
+
return u.m(a, m);
|
|
222
222
|
};
|
|
223
223
|
switch (c) {
|
|
224
|
-
case
|
|
224
|
+
case H:
|
|
225
225
|
i = T() / 12;
|
|
226
226
|
break;
|
|
227
|
-
case
|
|
227
|
+
case f:
|
|
228
228
|
i = T();
|
|
229
229
|
break;
|
|
230
|
-
case
|
|
230
|
+
case Z:
|
|
231
231
|
i = T() / 3;
|
|
232
232
|
break;
|
|
233
|
-
case
|
|
234
|
-
i = (
|
|
233
|
+
case p:
|
|
234
|
+
i = (y - v) / 6048e5;
|
|
235
235
|
break;
|
|
236
|
-
case
|
|
237
|
-
i = (
|
|
236
|
+
case b:
|
|
237
|
+
i = (y - v) / 864e5;
|
|
238
238
|
break;
|
|
239
239
|
case O:
|
|
240
|
-
i =
|
|
240
|
+
i = y / Y;
|
|
241
241
|
break;
|
|
242
|
-
case
|
|
243
|
-
i =
|
|
242
|
+
case S:
|
|
243
|
+
i = y / h;
|
|
244
244
|
break;
|
|
245
245
|
case _:
|
|
246
|
-
i =
|
|
246
|
+
i = y / d;
|
|
247
247
|
break;
|
|
248
248
|
default:
|
|
249
|
-
i =
|
|
249
|
+
i = y;
|
|
250
250
|
}
|
|
251
251
|
return e ? i : u.a(i);
|
|
252
252
|
}, r.daysInMonth = function() {
|
|
253
|
-
return this.endOf(
|
|
253
|
+
return this.endOf(f).$D;
|
|
254
254
|
}, r.$locale = function() {
|
|
255
|
-
return
|
|
255
|
+
return j[this.$L];
|
|
256
256
|
}, r.locale = function(t, n) {
|
|
257
257
|
if (!t) return this.$L;
|
|
258
|
-
var e = this.clone(), i =
|
|
258
|
+
var e = this.clone(), i = X(t, n, !0);
|
|
259
259
|
return i && (e.$L = i), e;
|
|
260
260
|
}, r.clone = function() {
|
|
261
261
|
return u.w(this.$d, this);
|
|
@@ -268,133 +268,134 @@ function Mt() {
|
|
|
268
268
|
}, r.toString = function() {
|
|
269
269
|
return this.$d.toUTCString();
|
|
270
270
|
}, s;
|
|
271
|
-
})(), st =
|
|
272
|
-
return D.prototype = st, [["$ms",
|
|
271
|
+
})(), st = B.prototype;
|
|
272
|
+
return D.prototype = st, [["$ms", g], ["$s", _], ["$m", S], ["$H", O], ["$W", b], ["$M", f], ["$y", H], ["$D", M]].forEach((function(s) {
|
|
273
273
|
st[s[1]] = function(r) {
|
|
274
274
|
return this.$g(r, s[0], s[1]);
|
|
275
275
|
};
|
|
276
276
|
})), D.extend = function(s, r) {
|
|
277
|
-
return s.$i || (s(r,
|
|
278
|
-
}, D.locale =
|
|
277
|
+
return s.$i || (s(r, B, D), s.$i = !0), D;
|
|
278
|
+
}, D.locale = X, D.isDayjs = et, D.unix = function(s) {
|
|
279
279
|
return D(1e3 * s);
|
|
280
|
-
}, D.en =
|
|
280
|
+
}, D.en = j[C], D.Ls = j, D.p = {}, D;
|
|
281
281
|
}));
|
|
282
|
-
})(
|
|
282
|
+
})(G)), G.exports;
|
|
283
283
|
}
|
|
284
|
-
var
|
|
285
|
-
const
|
|
284
|
+
var Mt = pt();
|
|
285
|
+
const U = /* @__PURE__ */ mt(Mt), V = 60, Dt = [
|
|
286
286
|
"YYYY-MM-DD",
|
|
287
287
|
"YYYY/MM/DD",
|
|
288
288
|
"YYYY-MM-DD HH:mm",
|
|
289
289
|
"YYYY/MM/DD HH:mm",
|
|
290
290
|
"YYYY-MM-DD HH:mm:ss",
|
|
291
291
|
"YYYY/MM/DD HH:mm:ss"
|
|
292
|
-
], at = (
|
|
293
|
-
if (!
|
|
292
|
+
], at = ($) => {
|
|
293
|
+
if (!nt($))
|
|
294
294
|
return "00:00:00";
|
|
295
|
-
const l =
|
|
295
|
+
const l = U($).diff(U());
|
|
296
296
|
if (l <= 0)
|
|
297
297
|
return "00:00:00";
|
|
298
|
-
const d = Math.floor(l / 1e3),
|
|
299
|
-
return `${
|
|
300
|
-
}, ut = (
|
|
298
|
+
const d = Math.floor(l / 1e3), h = Math.floor(d / 86400), Y = Math.floor(d % 86400 / 3600), g = Math.floor(d % 3600 / 60), _ = d % 60;
|
|
299
|
+
return `${h ? `${h}:` : ""}${`${Y}`.padStart(2, "0")}:${`${g}`.padStart(2, "0")}:${`${_}`.padStart(2, "0")}`;
|
|
300
|
+
}, ut = ($) => {
|
|
301
301
|
const l = (d) => `${d}`.padStart(2, "0");
|
|
302
|
-
return `${l(Math.floor(
|
|
303
|
-
},
|
|
304
|
-
const { mode: l, showType: d = "default", size:
|
|
305
|
-
d === "count" ? ut(0) : d === "default" ?
|
|
306
|
-
),
|
|
302
|
+
return `${l(Math.floor($ / V / V))}:${l(Math.floor($ / V) % V)}:${l($ % V)}`;
|
|
303
|
+
}, nt = ($) => Dt.some((l) => U($, l, !0).isValid()), ot = "HH:mm:ss", dt = 900, St = ($) => {
|
|
304
|
+
const { mode: l, showType: d = "default", size: h = 40, className: Y, bgColor: g, borderColor: _, textShadowColor: S, finishCountFn: O } = $, [b, p] = ct(
|
|
305
|
+
d === "count" ? ut(0) : d === "default" ? U().format(ot) : at(d)
|
|
306
|
+
), f = lt({
|
|
307
307
|
t: null
|
|
308
|
-
}),
|
|
309
|
-
"--card-size": `${
|
|
310
|
-
"--card-w": `${
|
|
311
|
-
"--card-h": `${
|
|
308
|
+
}), Z = {
|
|
309
|
+
"--card-size": `${h}px`,
|
|
310
|
+
"--card-w": `${h * 1.25}px`,
|
|
311
|
+
"--card-h": `${h * 2}px`,
|
|
312
312
|
// 下面两个必须是一个确定的数字，不能是表达式
|
|
313
|
-
"--transx": `${-
|
|
314
|
-
"--transy": `${-
|
|
313
|
+
"--transx": `${-h * 1.25 / 2}px`,
|
|
314
|
+
"--transy": `${-h}px`,
|
|
315
315
|
"--delay": `${dt / 1e3}s`,
|
|
316
|
-
"--bgColor":
|
|
317
|
-
"--borderColor": _
|
|
316
|
+
"--bgColor": g,
|
|
317
|
+
"--borderColor": _,
|
|
318
|
+
"--textShadow": S ? `1px 2px 3px ${S}` : "none"
|
|
318
319
|
};
|
|
319
|
-
|
|
320
|
-
let
|
|
321
|
-
|
|
322
|
-
let
|
|
323
|
-
d === "count" ?
|
|
320
|
+
K(() => {
|
|
321
|
+
let M = Date.now();
|
|
322
|
+
f.current.t && (clearInterval(f.current.t), f.current.t = null, M = Date.now()), f.current.t = setInterval(() => {
|
|
323
|
+
let k = () => "";
|
|
324
|
+
d === "count" ? k = () => ut(Math.floor((Date.now() - M) / 1e3)) : d === "default" ? k = () => U().format(ot) : k = () => at(d), p(k());
|
|
324
325
|
}, 1e3);
|
|
325
|
-
}, [d]),
|
|
326
|
-
|
|
327
|
-
|
|
326
|
+
}, [d]), K(() => {
|
|
327
|
+
nt(d) && b === "00:00:00" && O && setTimeout(() => {
|
|
328
|
+
O();
|
|
328
329
|
}, 1e3);
|
|
329
|
-
}, [
|
|
330
|
-
const
|
|
331
|
-
if (!
|
|
330
|
+
}, [b, d, O]);
|
|
331
|
+
const H = () => {
|
|
332
|
+
if (!b)
|
|
332
333
|
return null;
|
|
333
|
-
const
|
|
334
|
-
return /* @__PURE__ */
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
334
|
+
const M = b.split(":"), k = M[M.length - 3].split(""), E = M[M.length - 2].split(""), J = M[M.length - 1].split(""), tt = M.length === 4 ? M[0].split("") : [], w = nt(d), q = tt.map((j, P) => /* @__PURE__ */ o(W, { mode: l, time: +j, limit: w ? -9 : 9, size: h }, P)), C = /* @__PURE__ */ o("span", { children: ":" });
|
|
335
|
+
return /* @__PURE__ */ A(rt, { children: [
|
|
336
|
+
q.length ? /* @__PURE__ */ A(rt, { children: [
|
|
337
|
+
q,
|
|
338
|
+
w ? /* @__PURE__ */ o("p", { children: "天" }) : C
|
|
338
339
|
] }) : null,
|
|
339
|
-
/* @__PURE__ */ o(
|
|
340
|
-
/* @__PURE__ */ o(
|
|
341
|
-
|
|
342
|
-
/* @__PURE__ */ o(
|
|
343
|
-
/* @__PURE__ */ o(
|
|
344
|
-
|
|
345
|
-
/* @__PURE__ */ o(
|
|
346
|
-
/* @__PURE__ */ o(
|
|
347
|
-
|
|
340
|
+
/* @__PURE__ */ o(W, { mode: l, time: +k[0], limit: w ? -2 : 2, size: h }),
|
|
341
|
+
/* @__PURE__ */ o(W, { mode: l, time: +k[1], limit: w ? -9 : 9, size: h }),
|
|
342
|
+
w ? /* @__PURE__ */ o("p", { children: "小时" }) : C,
|
|
343
|
+
/* @__PURE__ */ o(W, { mode: l, time: +E[0], limit: w ? -5 : 5, size: h }),
|
|
344
|
+
/* @__PURE__ */ o(W, { mode: l, time: +E[1], limit: w ? -9 : 9, size: h }),
|
|
345
|
+
w ? /* @__PURE__ */ o("p", { children: "分" }) : C,
|
|
346
|
+
/* @__PURE__ */ o(W, { mode: l, time: +J[0], limit: w ? -5 : 5, size: h }),
|
|
347
|
+
/* @__PURE__ */ o(W, { mode: l, time: +J[1], limit: w ? -9 : 9, size: h }),
|
|
348
|
+
w && /* @__PURE__ */ o("p", { children: "秒" })
|
|
348
349
|
] });
|
|
349
350
|
};
|
|
350
|
-
return /* @__PURE__ */ o("div", { className: `time-runner ${Y || ""}`, style:
|
|
351
|
-
}, vt = (
|
|
352
|
-
const { time: l, limit: d, mode:
|
|
351
|
+
return /* @__PURE__ */ o("div", { className: `time-runner ${Y || ""}`, style: Z, children: H() });
|
|
352
|
+
}, vt = ($) => {
|
|
353
|
+
const { time: l, limit: d, mode: h, size: Y } = $, [g, _] = ct(!1), S = lt({
|
|
353
354
|
t: l
|
|
354
|
-
}), O = ht(() => l !==
|
|
355
|
+
}), O = ht(() => l !== S.current.t ? {
|
|
355
356
|
"--driftX": `${Math.floor(Math.random() * (-Y - Y + 1)) + Y}px`,
|
|
356
357
|
"--driftY": `${Math.floor(Math.random() * (-Y * 2 - Y * 2 + 1)) + Y * 2}px`,
|
|
357
358
|
"--driftRZ": `${Math.floor(Math.random() * 151) + 50}deg`,
|
|
358
359
|
"--driftRX": `${Math.floor(Math.random() * 151) + 50}deg`
|
|
359
360
|
} : null, [l, Y]);
|
|
360
|
-
return
|
|
361
|
-
l !==
|
|
362
|
-
}, [l]),
|
|
363
|
-
|
|
364
|
-
|
|
361
|
+
return K(() => {
|
|
362
|
+
l !== S.current.t && _(!0);
|
|
363
|
+
}, [l]), K(() => {
|
|
364
|
+
g && setTimeout(() => {
|
|
365
|
+
S.current.t = l, _(!1);
|
|
365
366
|
}, dt);
|
|
366
|
-
}, [
|
|
367
|
-
const { t:
|
|
368
|
-
let
|
|
369
|
-
switch (d > 0 ?
|
|
367
|
+
}, [g, l]), /* @__PURE__ */ o(rt, { children: (() => {
|
|
368
|
+
const { t: p } = S.current;
|
|
369
|
+
let f = p;
|
|
370
|
+
switch (d > 0 ? f = p >= d ? 0 : p + 1 : f = p <= 0 ? Math.abs(d) : p - 1, h) {
|
|
370
371
|
case "card":
|
|
371
|
-
return /* @__PURE__ */
|
|
372
|
-
/* @__PURE__ */
|
|
373
|
-
/* @__PURE__ */ o("p", { children:
|
|
374
|
-
/* @__PURE__ */ o("p", { children:
|
|
372
|
+
return /* @__PURE__ */ A("div", { className: "clock-card", children: [
|
|
373
|
+
/* @__PURE__ */ A("div", { className: `clock-b ${g ? "run" : ""}`, children: [
|
|
374
|
+
/* @__PURE__ */ o("p", { children: f }),
|
|
375
|
+
/* @__PURE__ */ o("p", { children: f })
|
|
375
376
|
] }),
|
|
376
|
-
/* @__PURE__ */
|
|
377
|
-
/* @__PURE__ */ o("p", { children:
|
|
378
|
-
/* @__PURE__ */ o("p", { children:
|
|
377
|
+
/* @__PURE__ */ A("div", { className: `clock-f ${g ? "run" : ""}`, children: [
|
|
378
|
+
/* @__PURE__ */ o("p", { children: p }),
|
|
379
|
+
/* @__PURE__ */ o("p", { children: p })
|
|
379
380
|
] })
|
|
380
381
|
] });
|
|
381
382
|
case "cube-v":
|
|
382
|
-
return /* @__PURE__ */ o("div", { className: `cube-v ${
|
|
383
|
-
/* @__PURE__ */ o("p", { children:
|
|
384
|
-
/* @__PURE__ */ o("p", { children:
|
|
383
|
+
return /* @__PURE__ */ o("div", { className: `cube-v ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
|
|
384
|
+
/* @__PURE__ */ o("p", { children: f }),
|
|
385
|
+
/* @__PURE__ */ o("p", { children: p })
|
|
385
386
|
] }) });
|
|
386
387
|
case "cube-h":
|
|
387
|
-
return /* @__PURE__ */ o("div", { className: `cube-h ${
|
|
388
|
-
/* @__PURE__ */ o("p", { children:
|
|
389
|
-
/* @__PURE__ */ o("p", { children:
|
|
388
|
+
return /* @__PURE__ */ o("div", { className: `cube-h ${g ? "run" : ""}`, children: /* @__PURE__ */ A("div", { children: [
|
|
389
|
+
/* @__PURE__ */ o("p", { children: f }),
|
|
390
|
+
/* @__PURE__ */ o("p", { children: p })
|
|
390
391
|
] }) });
|
|
391
392
|
case "drift":
|
|
392
|
-
return /* @__PURE__ */ o("div", { className: `drift ${
|
|
393
|
+
return /* @__PURE__ */ o("div", { className: `drift ${g ? "run" : ""}`, "data-digit": p, style: O, children: f });
|
|
393
394
|
default:
|
|
394
|
-
return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("p", { children:
|
|
395
|
+
return /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("p", { children: p }) });
|
|
395
396
|
}
|
|
396
397
|
})() });
|
|
397
|
-
},
|
|
398
|
+
}, W = ft(vt);
|
|
398
399
|
export {
|
|
399
400
|
St as TimeRunner
|
|
400
401
|
};
|
package/dist/time-runner.umd.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
(function(j,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(j=typeof globalThis<"u"?globalThis:j||self,i(j["time-runner"]={},j.jsxRuntime,j.React))})(this,(function(j,i,k){"use strict";function ct(p){return p&&p.__esModule&&Object.prototype.hasOwnProperty.call(p,"default")?p.default:p}var P={exports:{}},ft=P.exports,rt;function dt(){return rt||(rt=1,(function(p,f){(function(d,l){p.exports=l()})(ft,(function(){var d=1e3,l=6e4,Y=36e5,S="millisecond",O="second",v="minute",T="hour",x="day",h="week",$="month",X="quarter",M="year",w="date",q="Invalid Date",B=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,tt=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,_={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(s){var r=["th","st","nd","rd"],t=s%100;return"["+s+(r[(t-20)%10]||r[t]||r[0])+"]"}},A=function(s,r,t){var n=String(s);return!n||n.length>=r?s:""+Array(r+1-n.length).join(t)+s},U={s:A,z:function(s){var r=-s.utcOffset(),t=Math.abs(r),n=Math.floor(t/60),e=t%60;return(r<=0?"+":"-")+A(n,2,"0")+":"+A(e,2,"0")},m:function s(r,t){if(r.date()<t.date())return-s(t,r);var n=12*(t.year()-r.year())+(t.month()-r.month()),e=r.clone().add(n,$),a=t-e<0,o=r.clone().add(n+(a?-1:1),$);return+(-(n+(t-e)/(a?e-o:o-e))||0)},a:function(s){return s<0?Math.ceil(s)||0:Math.floor(s)},p:function(s){return{M:$,y:M,w:h,d:x,D:w,h:T,m:v,s:O,ms:S,Q:X}[s]||String(s||"").toLowerCase().replace(/s$/,"")},u:function(s){return s===void 0}},F="en",C={};C[F]=_;var ot="$isDayjsObject",et=function(s){return s instanceof G||!(!s||!s[ot])},Q=function s(r,t,n){var e;if(!r)return F;if(typeof r=="string"){var a=r.toLowerCase();C[a]&&(e=a),t&&(C[a]=t,e=a);var o=r.split("-");if(!e&&o.length>1)return s(o[0])}else{var c=r.name;C[c]=r,e=c}return!n&&e&&(F=e),e||!n&&F},y=function(s,r){if(et(s))return s.clone();var t=typeof r=="object"?r:{};return t.date=s,t.args=arguments,new G(t)},u=U;u.l=Q,u.i=et,u.w=function(s,r){return y(s,{locale:r.$L,utc:r.$u,x:r.$x,$offset:r.$offset})};var G=(function(){function s(t){this.$L=Q(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[ot]=!0}var r=s.prototype;return r.parse=function(t){this.$d=(function(n){var e=n.date,a=n.utc;if(e===null)return new Date(NaN);if(u.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var o=e.match(B);if(o){var c=o[2]-1||0,m=(o[7]||"0").substring(0,3);return a?new Date(Date.UTC(o[1],c,o[3]||1,o[4]||0,o[5]||0,o[6]||0,m)):new Date(o[1],c,o[3]||1,o[4]||0,o[5]||0,o[6]||0,m)}}return new Date(e)})(t),this.init()},r.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},r.$utils=function(){return u},r.isValid=function(){return this.$d.toString()!==q},r.isSame=function(t,n){var e=y(t);return this.startOf(n)<=e&&e<=this.endOf(n)},r.isAfter=function(t,n){return y(t)<this.startOf(n)},r.isBefore=function(t,n){return this.endOf(n)<y(t)},r.$g=function(t,n,e){return u.u(t)?this[n]:this.set(e,t)},r.unix=function(){return Math.floor(this.valueOf()/1e3)},r.valueOf=function(){return this.$d.getTime()},r.startOf=function(t,n){var e=this,a=!!u.u(n)||n,o=u.p(t),c=function(W,b){var L=u.w(e.$u?Date.UTC(e.$y,b,W):new Date(e.$y,b,W),e);return a?L:L.endOf(x)},m=function(W,b){return u.w(e.toDate()[W].apply(e.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(b)),e)},D=this.$W,g=this.$M,H=this.$D,E="set"+(this.$u?"UTC":"");switch(o){case M:return a?c(1,0):c(31,11);case $:return a?c(1,g):c(0,g+1);case h:var I=this.$locale().weekStart||0,Z=(D<I?D+7:D)-I;return c(a?H-Z:H+(6-Z),g);case x:case w:return m(E+"Hours",0);case T:return m(E+"Minutes",1);case v:return m(E+"Seconds",2);case O:return m(E+"Milliseconds",3);default:return this.clone()}},r.endOf=function(t){return this.startOf(t,!1)},r.$set=function(t,n){var e,a=u.p(t),o="set"+(this.$u?"UTC":""),c=(e={},e[x]=o+"Date",e[w]=o+"Date",e[$]=o+"Month",e[M]=o+"FullYear",e[T]=o+"Hours",e[v]=o+"Minutes",e[O]=o+"Seconds",e[S]=o+"Milliseconds",e)[a],m=a===x?this.$D+(n-this.$W):n;if(a===$||a===M){var D=this.clone().set(w,1);D.$d[c](m),D.init(),this.$d=D.set(w,Math.min(this.$D,D.daysInMonth())).$d}else c&&this.$d[c](m);return this.init(),this},r.set=function(t,n){return this.clone().$set(t,n)},r.get=function(t){return this[u.p(t)]()},r.add=function(t,n){var e,a=this;t=Number(t);var o=u.p(n),c=function(g){var H=y(a);return u.w(H.date(H.date()+Math.round(g*t)),a)};if(o===$)return this.set($,this.$M+t);if(o===M)return this.set(M,this.$y+t);if(o===x)return c(1);if(o===h)return c(7);var m=(e={},e[v]=l,e[T]=Y,e[O]=d,e)[o]||1,D=this.$d.getTime()+t*m;return u.w(D,this)},r.subtract=function(t,n){return this.add(-1*t,n)},r.format=function(t){var n=this,e=this.$locale();if(!this.isValid())return e.invalidDate||q;var a=t||"YYYY-MM-DDTHH:mm:ssZ",o=u.z(this),c=this.$H,m=this.$m,D=this.$M,g=e.weekdays,H=e.months,E=e.meridiem,I=function(b,L,J,K){return b&&(b[L]||b(n,a))||J[L].slice(0,K)},Z=function(b){return u.s(c%12||12,b,"0")},W=E||function(b,L,J){var K=b<12?"AM":"PM";return J?K.toLowerCase():K};return a.replace(tt,(function(b,L){return L||(function(J){switch(J){case"YY":return String(n.$y).slice(-2);case"YYYY":return u.s(n.$y,4,"0");case"M":return D+1;case"MM":return u.s(D+1,2,"0");case"MMM":return I(e.monthsShort,D,H,3);case"MMMM":return I(H,D);case"D":return n.$D;case"DD":return u.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return I(e.weekdaysMin,n.$W,g,2);case"ddd":return I(e.weekdaysShort,n.$W,g,3);case"dddd":return g[n.$W];case"H":return String(c);case"HH":return u.s(c,2,"0");case"h":return Z(1);case"hh":return Z(2);case"a":return W(c,m,!0);case"A":return W(c,m,!1);case"m":return String(m);case"mm":return u.s(m,2,"0");case"s":return String(n.$s);case"ss":return u.s(n.$s,2,"0");case"SSS":return u.s(n.$ms,3,"0");case"Z":return o}return null})(b)||o.replace(":","")}))},r.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},r.diff=function(t,n,e){var a,o=this,c=u.p(n),m=y(t),D=(m.utcOffset()-this.utcOffset())*l,g=this-m,H=function(){return u.m(o,m)};switch(c){case M:a=H()/12;break;case $:a=H();break;case X:a=H()/3;break;case h:a=(g-D)/6048e5;break;case x:a=(g-D)/864e5;break;case T:a=g/Y;break;case v:a=g/l;break;case O:a=g/d;break;default:a=g}return e?a:u.a(a)},r.daysInMonth=function(){return this.endOf($).$D},r.$locale=function(){return C[this.$L]},r.locale=function(t,n){if(!t)return this.$L;var e=this.clone(),a=Q(t,n,!0);return a&&(e.$L=a),e},r.clone=function(){return u.w(this.$d,this)},r.toDate=function(){return new Date(this.valueOf())},r.toJSON=function(){return this.isValid()?this.toISOString():null},r.toISOString=function(){return this.$d.toISOString()},r.toString=function(){return this.$d.toUTCString()},s})(),ut=G.prototype;return y.prototype=ut,[["$ms",S],["$s",O],["$m",v],["$H",T],["$W",x],["$M",$],["$y",M],["$D",w]].forEach((function(s){ut[s[1]]=function(r){return this.$g(r,s[0],s[1])}})),y.extend=function(s,r){return s.$i||(s(r,G,y),s.$i=!0),y},y.locale=Q,y.isDayjs=et,y.unix=function(s){return y(1e3*s)},y.en=C[F],y.Ls=C,y.p={},y}))})(P)),P.exports}var lt=dt();const z=ct(lt),V=60,ht=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],nt=p=>{if(!R(p))return"00:00:00";const f=z(p).diff(z());if(f<=0)return"00:00:00";const d=Math.floor(f/1e3),l=Math.floor(d/86400),Y=Math.floor(d%86400/3600),S=Math.floor(d%3600/60),O=d%60;return`${l?`${l}:`:""}${`${Y}`.padStart(2,"0")}:${`${S}`.padStart(2,"0")}:${`${O}`.padStart(2,"0")}`},st=p=>{const f=d=>`${d}`.padStart(2,"0");return`${f(Math.floor(p/V/V))}:${f(Math.floor(p/V)%V)}:${f(p%V)}`},R=p=>ht.some(f=>z(p,f,!0).isValid()),it="HH:mm:ss",at=900,$t=p=>{const{mode:f,showType:d="default",size:l=40,className:Y,bgColor:S,borderColor:O,finishCountFn:v}=p,[T,x]=k.useState(d==="count"?st(0):d==="default"?z().format(it):nt(d)),h=k.useRef({t:null}),$={"--card-size":`${l}px`,"--card-w":`${l*1.25}px`,"--card-h":`${l*2}px`,"--transx":`${-l*1.25/2}px`,"--transy":`${-l}px`,"--delay":`${at/1e3}s`,"--bgColor":S,"--borderColor":O};k.useEffect(()=>{let M=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,M=Date.now()),h.current.t=setInterval(()=>{let w=()=>"";d==="count"?w=()=>st(Math.floor((Date.now()-M)/1e3)):d==="default"?w=()=>z().format(it):w=()=>nt(d),x(w())},1e3)},[d]),k.useEffect(()=>{R(d)&&T==="00:00:00"&&v&&setTimeout(()=>{v()},1e3)},[T,d,v]);const X=()=>{if(!T)return null;const M=T.split(":"),w=M[M.length-3].split(""),q=M[M.length-2].split(""),B=M[M.length-1].split(""),tt=M.length===4?M[0].split(""):[],_=R(d),A=tt.map((F,C)=>i.jsx(N,{mode:f,time:+F,limit:_?-9:9,size:l},C)),U=i.jsx("span",{children:":"});return i.jsxs(i.Fragment,{children:[A.length?i.jsxs(i.Fragment,{children:[A,_?i.jsx("p",{children:"天"}):U]}):null,i.jsx(N,{mode:f,time:+w[0],limit:_?-2:2,size:l}),i.jsx(N,{mode:f,time:+w[1],limit:_?-9:9,size:l}),_?i.jsx("p",{children:"小时"}):U,i.jsx(N,{mode:f,time:+q[0],limit:_?-5:5,size:l}),i.jsx(N,{mode:f,time:+q[1],limit:_?-9:9,size:l}),_?i.jsx("p",{children:"分"}):U,i.jsx(N,{mode:f,time:+B[0],limit:_?-5:5,size:l}),i.jsx(N,{mode:f,time:+B[1],limit:_?-9:9,size:l}),_&&i.jsx("p",{children:"秒"})]})};return i.jsx("div",{className:`time-runner ${Y||""}`,style:$,children:X()})},mt=p=>{const{time:f,limit:d,mode:l,size:Y}=p,[S,O]=k.useState(!1),v=k.useRef({t:f}),T=k.useMemo(()=>f!==v.current.t?{"--driftX":`${Math.floor(Math.random()*(-Y-Y+1))+Y}px`,"--driftY":`${Math.floor(Math.random()*(-Y*2-Y*2+1))+Y*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[f,Y]);k.useEffect(()=>{f!==v.current.t&&O(!0)},[f]),k.useEffect(()=>{S&&setTimeout(()=>{v.current.t=f,O(!1)},at)},[S,f]);const x=()=>{const{t:h}=v.current;let $=h;switch(d>0?$=h>=d?0:h+1:$=h<=0?Math.abs(d):h-1,l){case"card":return i.jsxs("div",{className:"clock-card",children:[i.jsxs("div",{className:`clock-b ${S?"run":""}`,children:[i.jsx("p",{children:$}),i.jsx("p",{children:$})]}),i.jsxs("div",{className:`clock-f ${S?"run":""}`,children:[i.jsx("p",{children:h}),i.jsx("p",{children:h})]})]});case"cube-v":return i.jsx("div",{className:`cube-v ${S?"run":""}`,children:i.jsxs("div",{children:[i.jsx("p",{children:$}),i.jsx("p",{children:h})]})});case"cube-h":return i.jsx("div",{className:`cube-h ${S?"run":""}`,children:i.jsxs("div",{children:[i.jsx("p",{children:$}),i.jsx("p",{children:h})]})});case"drift":return i.jsx("div",{className:`drift ${S?"run":""}`,"data-digit":h,style:T,children:$});default:return i.jsx("div",{children:i.jsx("p",{children:h})})}};return i.jsx(i.Fragment,{children:x()})},N=k.memo(mt);j.TimeRunner=$t,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(L,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(L=typeof globalThis<"u"?globalThis:L||self,o(L["time-runner"]={},L.jsxRuntime,L.React))})(this,(function(L,o,O){"use strict";var nt=document.createElement("style");nt.textContent=`.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333;text-shadow:var(--textShadow)}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;text-shadow:var(--textShadow);overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;text-shadow:var(--textShadow);box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(nt);function lt(v){return v&&v.__esModule&&Object.prototype.hasOwnProperty.call(v,"default")?v.default:v}var q={exports:{}},ut=q.exports,it;function ht(){return it||(it=1,(function(v,l){(function(u,f){v.exports=f()})(ut,(function(){var u=1e3,f=6e4,k=36e5,M="millisecond",Y="second",y="minute",C="hour",w="day",m="week",h="month",U="quarter",T="year",$="date",H="Invalid Date",J=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,P=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,rt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(i){var e=["th","st","nd","rd"],t=i%100;return"["+i+(e[(t-20)%10]||e[t]||e[0])+"]"}},D=function(i,e,t){var n=String(i);return!n||n.length>=e?i:""+Array(e+1-n.length).join(t)+i},B={s:D,z:function(i){var e=-i.utcOffset(),t=Math.abs(e),n=Math.floor(t/60),r=t%60;return(e<=0?"+":"-")+D(n,2,"0")+":"+D(r,2,"0")},m:function i(e,t){if(e.date()<t.date())return-i(t,e);var n=12*(t.year()-e.year())+(t.month()-e.month()),r=e.clone().add(n,h),a=t-r<0,s=e.clone().add(n+(a?-1:1),h);return+(-(n+(t-r)/(a?r-s:s-r))||0)},a:function(i){return i<0?Math.ceil(i)||0:Math.floor(i)},p:function(i){return{M:h,y:T,w:m,d:w,D:$,h:C,m:y,s:Y,ms:M,Q:U}[i]||String(i||"").toLowerCase().replace(/s$/,"")},u:function(i){return i===void 0}},z="en",j={};j[z]=rt;var Q="$isDayjsObject",et=function(i){return i instanceof K||!(!i||!i[Q])},G=function i(e,t,n){var r;if(!e)return z;if(typeof e=="string"){var a=e.toLowerCase();j[a]&&(r=a),t&&(j[a]=t,r=a);var s=e.split("-");if(!r&&s.length>1)return i(s[0])}else{var d=e.name;j[d]=e,r=d}return!n&&r&&(z=r),r||!n&&z},x=function(i,e){if(et(i))return i.clone();var t=typeof e=="object"?e:{};return t.date=i,t.args=arguments,new K(t)},c=B;c.l=G,c.i=et,c.w=function(i,e){return x(i,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var K=(function(){function i(t){this.$L=G(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[Q]=!0}var e=i.prototype;return e.parse=function(t){this.$d=(function(n){var r=n.date,a=n.utc;if(r===null)return new Date(NaN);if(c.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var s=r.match(J);if(s){var d=s[2]-1||0,p=(s[7]||"0").substring(0,3);return a?new Date(Date.UTC(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)):new Date(s[1],d,s[3]||1,s[4]||0,s[5]||0,s[6]||0,p)}}return new Date(r)})(t),this.init()},e.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},e.$utils=function(){return c},e.isValid=function(){return this.$d.toString()!==H},e.isSame=function(t,n){var r=x(t);return this.startOf(n)<=r&&r<=this.endOf(n)},e.isAfter=function(t,n){return x(t)<this.startOf(n)},e.isBefore=function(t,n){return this.endOf(n)<x(t)},e.$g=function(t,n,r){return c.u(t)?this[n]:this.set(r,t)},e.unix=function(){return Math.floor(this.valueOf()/1e3)},e.valueOf=function(){return this.$d.getTime()},e.startOf=function(t,n){var r=this,a=!!c.u(n)||n,s=c.p(t),d=function(I,S){var N=c.w(r.$u?Date.UTC(r.$y,S,I):new Date(r.$y,S,I),r);return a?N:N.endOf(w)},p=function(I,S){return c.w(r.toDate()[I].apply(r.toDate("s"),(a?[0,0,0,0]:[23,59,59,999]).slice(S)),r)},b=this.$W,g=this.$M,_=this.$D,W="set"+(this.$u?"UTC":"");switch(s){case T:return a?d(1,0):d(31,11);case h:return a?d(1,g):d(0,g+1);case m:var F=this.$locale().weekStart||0,V=(b<F?b+7:b)-F;return d(a?_-V:_+(6-V),g);case w:case $:return p(W+"Hours",0);case C:return p(W+"Minutes",1);case y:return p(W+"Seconds",2);case Y:return p(W+"Milliseconds",3);default:return this.clone()}},e.endOf=function(t){return this.startOf(t,!1)},e.$set=function(t,n){var r,a=c.p(t),s="set"+(this.$u?"UTC":""),d=(r={},r[w]=s+"Date",r[$]=s+"Date",r[h]=s+"Month",r[T]=s+"FullYear",r[C]=s+"Hours",r[y]=s+"Minutes",r[Y]=s+"Seconds",r[M]=s+"Milliseconds",r)[a],p=a===w?this.$D+(n-this.$W):n;if(a===h||a===T){var b=this.clone().set($,1);b.$d[d](p),b.init(),this.$d=b.set($,Math.min(this.$D,b.daysInMonth())).$d}else d&&this.$d[d](p);return this.init(),this},e.set=function(t,n){return this.clone().$set(t,n)},e.get=function(t){return this[c.p(t)]()},e.add=function(t,n){var r,a=this;t=Number(t);var s=c.p(n),d=function(g){var _=x(a);return c.w(_.date(_.date()+Math.round(g*t)),a)};if(s===h)return this.set(h,this.$M+t);if(s===T)return this.set(T,this.$y+t);if(s===w)return d(1);if(s===m)return d(7);var p=(r={},r[y]=f,r[C]=k,r[Y]=u,r)[s]||1,b=this.$d.getTime()+t*p;return c.w(b,this)},e.subtract=function(t,n){return this.add(-1*t,n)},e.format=function(t){var n=this,r=this.$locale();if(!this.isValid())return r.invalidDate||H;var a=t||"YYYY-MM-DDTHH:mm:ssZ",s=c.z(this),d=this.$H,p=this.$m,b=this.$M,g=r.weekdays,_=r.months,W=r.meridiem,F=function(S,N,Z,R){return S&&(S[N]||S(n,a))||Z[N].slice(0,R)},V=function(S){return c.s(d%12||12,S,"0")},I=W||function(S,N,Z){var R=S<12?"AM":"PM";return Z?R.toLowerCase():R};return a.replace(P,(function(S,N){return N||(function(Z){switch(Z){case"YY":return String(n.$y).slice(-2);case"YYYY":return c.s(n.$y,4,"0");case"M":return b+1;case"MM":return c.s(b+1,2,"0");case"MMM":return F(r.monthsShort,b,_,3);case"MMMM":return F(_,b);case"D":return n.$D;case"DD":return c.s(n.$D,2,"0");case"d":return String(n.$W);case"dd":return F(r.weekdaysMin,n.$W,g,2);case"ddd":return F(r.weekdaysShort,n.$W,g,3);case"dddd":return g[n.$W];case"H":return String(d);case"HH":return c.s(d,2,"0");case"h":return V(1);case"hh":return V(2);case"a":return I(d,p,!0);case"A":return I(d,p,!1);case"m":return String(p);case"mm":return c.s(p,2,"0");case"s":return String(n.$s);case"ss":return c.s(n.$s,2,"0");case"SSS":return c.s(n.$ms,3,"0");case"Z":return s}return null})(S)||s.replace(":","")}))},e.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},e.diff=function(t,n,r){var a,s=this,d=c.p(n),p=x(t),b=(p.utcOffset()-this.utcOffset())*f,g=this-p,_=function(){return c.m(s,p)};switch(d){case T:a=_()/12;break;case h:a=_();break;case U:a=_()/3;break;case m:a=(g-b)/6048e5;break;case w:a=(g-b)/864e5;break;case C:a=g/k;break;case y:a=g/f;break;case Y:a=g/u;break;default:a=g}return r?a:c.a(a)},e.daysInMonth=function(){return this.endOf(h).$D},e.$locale=function(){return j[this.$L]},e.locale=function(t,n){if(!t)return this.$L;var r=this.clone(),a=G(t,n,!0);return a&&(r.$L=a),r},e.clone=function(){return c.w(this.$d,this)},e.toDate=function(){return new Date(this.valueOf())},e.toJSON=function(){return this.isValid()?this.toISOString():null},e.toISOString=function(){return this.$d.toISOString()},e.toString=function(){return this.$d.toUTCString()},i})(),dt=K.prototype;return x.prototype=dt,[["$ms",M],["$s",Y],["$m",y],["$H",C],["$W",w],["$M",h],["$y",T],["$D",$]].forEach((function(i){dt[i[1]]=function(e){return this.$g(e,i[0],i[1])}})),x.extend=function(i,e){return i.$i||(i(e,K,x),i.$i=!0),x},x.locale=G,x.isDayjs=et,x.unix=function(i){return x(1e3*i)},x.en=j[z],x.Ls=j,x.p={},x}))})(q)),q.exports}var ft=ht();const E=lt(ft),A=60,pt=["YYYY-MM-DD","YYYY/MM/DD","YYYY-MM-DD HH:mm","YYYY/MM/DD HH:mm","YYYY-MM-DD HH:mm:ss","YYYY/MM/DD HH:mm:ss"],ot=v=>{if(!tt(v))return"00:00:00";const l=E(v).diff(E());if(l<=0)return"00:00:00";const u=Math.floor(l/1e3),f=Math.floor(u/86400),k=Math.floor(u%86400/3600),M=Math.floor(u%3600/60),Y=u%60;return`${f?`${f}:`:""}${`${k}`.padStart(2,"0")}:${`${M}`.padStart(2,"0")}:${`${Y}`.padStart(2,"0")}`},at=v=>{const l=u=>`${u}`.padStart(2,"0");return`${l(Math.floor(v/A/A))}:${l(Math.floor(v/A)%A)}:${l(v%A)}`},tt=v=>pt.some(l=>E(v,l,!0).isValid()),st="HH:mm:ss",ct=900,vt=v=>{const{mode:l,showType:u="default",size:f=40,className:k,bgColor:M,borderColor:Y,textShadowColor:y,finishCountFn:C}=v,[w,m]=O.useState(u==="count"?at(0):u==="default"?E().format(st):ot(u)),h=O.useRef({t:null}),U={"--card-size":`${f}px`,"--card-w":`${f*1.25}px`,"--card-h":`${f*2}px`,"--transx":`${-f*1.25/2}px`,"--transy":`${-f}px`,"--delay":`${ct/1e3}s`,"--bgColor":M,"--borderColor":Y,"--textShadow":y?`1px 2px 3px ${y}`:"none"};O.useEffect(()=>{let $=Date.now();h.current.t&&(clearInterval(h.current.t),h.current.t=null,$=Date.now()),h.current.t=setInterval(()=>{let H=()=>"";u==="count"?H=()=>at(Math.floor((Date.now()-$)/1e3)):u==="default"?H=()=>E().format(st):H=()=>ot(u),m(H())},1e3)},[u]),O.useEffect(()=>{tt(u)&&w==="00:00:00"&&C&&setTimeout(()=>{C()},1e3)},[w,u,C]);const T=()=>{if(!w)return null;const $=w.split(":"),H=$[$.length-3].split(""),J=$[$.length-2].split(""),P=$[$.length-1].split(""),rt=$.length===4?$[0].split(""):[],D=tt(u),B=rt.map((j,Q)=>o.jsx(X,{mode:l,time:+j,limit:D?-9:9,size:f},Q)),z=o.jsx("span",{children:":"});return o.jsxs(o.Fragment,{children:[B.length?o.jsxs(o.Fragment,{children:[B,D?o.jsx("p",{children:"天"}):z]}):null,o.jsx(X,{mode:l,time:+H[0],limit:D?-2:2,size:f}),o.jsx(X,{mode:l,time:+H[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"小时"}):z,o.jsx(X,{mode:l,time:+J[0],limit:D?-5:5,size:f}),o.jsx(X,{mode:l,time:+J[1],limit:D?-9:9,size:f}),D?o.jsx("p",{children:"分"}):z,o.jsx(X,{mode:l,time:+P[0],limit:D?-5:5,size:f}),o.jsx(X,{mode:l,time:+P[1],limit:D?-9:9,size:f}),D&&o.jsx("p",{children:"秒"})]})};return o.jsx("div",{className:`time-runner ${k||""}`,style:U,children:T()})},mt=v=>{const{time:l,limit:u,mode:f,size:k}=v,[M,Y]=O.useState(!1),y=O.useRef({t:l}),C=O.useMemo(()=>l!==y.current.t?{"--driftX":`${Math.floor(Math.random()*(-k-k+1))+k}px`,"--driftY":`${Math.floor(Math.random()*(-k*2-k*2+1))+k*2}px`,"--driftRZ":`${Math.floor(Math.random()*151)+50}deg`,"--driftRX":`${Math.floor(Math.random()*151)+50}deg`}:null,[l,k]);O.useEffect(()=>{l!==y.current.t&&Y(!0)},[l]),O.useEffect(()=>{M&&setTimeout(()=>{y.current.t=l,Y(!1)},ct)},[M,l]);const w=()=>{const{t:m}=y.current;let h=m;switch(u>0?h=m>=u?0:m+1:h=m<=0?Math.abs(u):m-1,f){case"card":return o.jsxs("div",{className:"clock-card",children:[o.jsxs("div",{className:`clock-b ${M?"run":""}`,children:[o.jsx("p",{children:h}),o.jsx("p",{children:h})]}),o.jsxs("div",{className:`clock-f ${M?"run":""}`,children:[o.jsx("p",{children:m}),o.jsx("p",{children:m})]})]});case"cube-v":return o.jsx("div",{className:`cube-v ${M?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:m})]})});case"cube-h":return o.jsx("div",{className:`cube-h ${M?"run":""}`,children:o.jsxs("div",{children:[o.jsx("p",{children:h}),o.jsx("p",{children:m})]})});case"drift":return o.jsx("div",{className:`drift ${M?"run":""}`,"data-digit":m,style:C,children:h});default:return o.jsx("div",{children:o.jsx("p",{children:m})})}};return o.jsx(o.Fragment,{children:w()})},X=O.memo(mt);L.TimeRunner=vt,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "time-runner",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Displaying timer, current time, and countdown with light animation effects(React component)",
|
|
5
5
|
"keywords": ["react", "countdown", "timer", "hook", "card", "less", "animation", "vite"],
|
|
6
6
|
"main": "./dist/time-runner.umd.js",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"typescript": "^5.9.3",
|
|
39
39
|
"vite": "^7.1.8",
|
|
40
40
|
"vite-plugin-dts": "^4.5.4",
|
|
41
|
-
"vite-plugin-eslint": "^1.8.1"
|
|
41
|
+
"vite-plugin-eslint": "^1.8.1",
|
|
42
|
+
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
42
43
|
},
|
|
43
44
|
"dependencies": {
|
|
44
45
|
"dayjs": "^1.11.18"
|
package/dist/time-runner.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.time-runner{width:max-content;display:flex;justify-content:space-between;align-items:center;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;font-variant-numeric:tabular-nums}.time-runner span{font-size:var(--card-size, 40px);margin:0 3px;padding-bottom:3px;display:inline-block}.time-runner>p{margin:0 3px}.time-runner>div{font-size:var(--card-size, 40px)}.time-runner>div>p{color:#333}.clock-card{position:relative;height:var(--card-h, 80px);width:var(--card-w, 50px);box-shadow:0 1px 5px #333;border-radius:6px}.clock-card:before{content:"";position:absolute;top:50%;left:0;background-color:#999;width:100%;height:1.5px;z-index:3;overflow:hidden}.clock-card .clock-f,.clock-card .clock-b{width:100%;height:100%;position:absolute;top:0;left:0}.clock-card .clock-f p,.clock-card .clock-b p{position:absolute;left:0;height:50%;width:100%;margin-bottom:0;text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);color:#fff;overflow:hidden;border-left:solid 1px var(--borderColor, #999);border-right:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1),.clock-card .clock-b p:nth-child(1){top:0;border-top:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(2),.clock-card .clock-b p:nth-child(2){bottom:0;border-bottom:solid 1px var(--borderColor, #999)}.clock-card .clock-f p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);transform-origin:bottom;backface-visibility:hidden;border-radius:7px 7px 0 0}.clock-card .clock-f p:nth-child(2){line-height:2px;border-radius:0 0 6px 6px}.clock-card .clock-f.run p:nth-child(1){transition:var(--delay) ease-in-out;transform:perspective(50px) rotateX(-180deg)}.clock-card .clock-b p:nth-child(1){line-height:calc(var(--card-h, 80px) - 2px);border-radius:7px 7px 0 0}.clock-card .clock-b p:nth-child(2){line-height:2px;transform-origin:top;transform:perspective(50px) rotateX(179.99deg);backface-visibility:hidden;border-radius:0 0 6px 6px}.clock-card .clock-b.run p:nth-child(2){transition:var(--delay) ease-in-out;transform:rotateX(0);z-index:2}.cube-v{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-v div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transy)}.cube-v p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-v p:nth-child(1){position:absolute;transform-origin:0 100%;transform:translateY(-100%) rotateX(90deg)}.cube-v.run div{transform:rotateX(-90deg);transition:var(--delay)}.cube-h{width:var(--card-w, 50px);height:var(--card-h, 80px);position:relative;perspective:300px}.cube-h div{width:100%;height:100%;transform-style:preserve-3d;transform-origin:center center var(--transx)}.cube-h p{width:100%;height:100%;line-height:var(--card-h, 80px);text-align:center;font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);border:solid 1px var(--borderColor, #999);color:#fff;margin-bottom:0;box-shadow:0 1px 2px #333;border-radius:2px}.cube-h p:nth-child(1){position:absolute;transform-origin:100% 0;transform:translate(-100%) rotateY(-90deg)}.cube-h.run div{transform:rotateY(90deg);transition:var(--delay)}.drift{height:var(--card-h, 80px);width:var(--card-w, 50px);font-size:var(--card-size, 40px);background-color:var(--bgColor, #333);line-height:var(--card-h, 80px);text-align:center;border:solid 1px var(--borderColor, #999);color:#fff;box-shadow:0 1px 2px #333;border-radius:2px;position:relative}.drift:before{content:attr(data-digit);position:absolute;top:0;left:0;line-height:var(--card-h, 80px);width:100%;text-align:center;overflow:hidden;height:100%;background-color:var(--bgColor, #333);transform-origin:center}.drift.run:before{transform:translate(var(--driftX),var(--driftY)) rotate(var(--driftRZ)) rotateX(var(--driftRX));opacity:0;transition:var(--delay);border:solid 2px var(--borderColor, #999)}
|