1. 新增：每次调用渲染的间隔时间（ms）

2. 所有时间都从秒改为毫秒
realgeoffrey · Apr 13, 2023 · 0c2325f · 0c2325f
1 parent 07f0355
commit 0c2325f
Show file tree

Hide file tree

Showing 11 changed files with 9,503 additions and 17,662 deletions.
diff --git a/README.md b/README.md
@@ -39,11 +39,12 @@ React的倒计时组件
   callback={() => {
     // 倒计时结束时执行的回调函数
   }}
-  leftSecond={提前到期的秒数（0）}
-  renderSecond={(second: number): React.ReactNode => {
-    // 参数：倒计时还剩下多少秒
+  leftMillisecond={提前到期的毫秒数（0）}
+  renderMillisecond={(millisecond: number): React.ReactNode => {
+    // 参数：倒计时还剩下多少毫秒
     // 返回：渲染本组件
   }}
+  intervalDelay={每次调用渲染的间隔时间，毫秒（1000）}
 />
 ```
 

diff --git a/demo/index.html b/demo/index.html
@@ -29,34 +29,40 @@ <h3>倒计时</h3>
               callback={() => {
                 console.log('callback');
               }}
-              leftSecond={1}
-              renderSecond={(second) => {
+              leftMillisecond={1000}
+              renderMillisecond={(millisecond) => {
                 // 格式化数字格式
                 const FORMAT_NUMBER = (number) => {
-                  if (number < 10) {
-                    return '0' + number;
+                  const numberStr = String(number);
+                  if (number < 1000) {
+                    return '0,' + '0'.repeat(3 - numberStr.length) + numberStr;
                   } else {
-                    return number.toString();
+                    return numberStr.slice(0, -3) + ',' + numberStr.slice(-3);
                   }
                 };
-                return FORMAT_NUMBER(second);
+
+                return FORMAT_NUMBER(millisecond);
               }}
+              intervalDelay={1000}
             />
 
+            <hr />
+
             <div>
+              设置结束时间戳：
               <div
                 onClick={() => {
                   setDeadline(105 * 1000 + Date.now());
                 }}
               >
-                105
+                105 * 1000
               </div>
               <div
                 onClick={() => {
                   setDeadline(15 * 1000 + Date.now());
                 }}
               >
-                15
+                15 * 1000
               </div>
               <div
                 onClick={() => {
@@ -70,21 +76,21 @@ <h3>倒计时</h3>
                   setDeadline(5 * 1000 + Date.now());
                 }}
               >
-                5
+                5 * 1000
               </div>
               <div
                 onClick={() => {
                   setDeadline(2 * 1000 + Date.now());
                 }}
               >
-                2
+                2 * 1000
               </div>
               <div
                 onClick={() => {
                   setDeadline(1 * 1000 + Date.now());
                 }}
               >
-                1
+                1 * 1000
               </div>
               <div
                 onClick={() => {

diff --git a/dev/index.tsx b/dev/index.tsx
@@ -10,68 +10,80 @@ const App = () => {
   return (
     <div>
       <h3>倒计时</h3>
-
+      剩余：
       <TimeCountdown
         deadlineTimestamp={deadline}
         callback={() => {
           console.log('callback');
         }}
-        leftSecond={1}
-        renderSecond={(second: number): React.ReactNode => {
+        leftMillisecond={1000}
+        renderMillisecond={(millisecond: number): React.ReactNode => {
           // 格式化数字格式
           const FORMAT_NUMBER = (number: number) => {
-            if (number < 10) {
-              return '0' + number;
+            const numberStr = String(number);
+            if (number < 1000) {
+              return '0,' + '0'.repeat(3 - numberStr.length) + numberStr;
             } else {
-              return number.toString();
+              return numberStr.slice(0, -3) + ',' + numberStr.slice(-3);
             }
           };
-          return FORMAT_NUMBER(second);
+
+          return FORMAT_NUMBER(millisecond);
         }}
+        intervalDelay={1000}
       />
-
+      ms
+      <hr />
       <>
+        设置结束时间戳：
         <div
           onClick={() => {
             setDeadline(105 * 1000 + Date.now());
           }}
         >
-          105
+          105 * 1000
         </div>
         <div
           onClick={() => {
             setDeadline(15 * 1000 + Date.now());
           }}
         >
-          15
+          15 * 1000
         </div>
         <div
           onClick={() => {
             setDeadline(10 * 1000 + Date.now());
           }}
         >
-          10
+          10 * 1000
         </div>
         <div
           onClick={() => {
             setDeadline(5 * 1000 + Date.now());
           }}
         >
-          5
+          5 * 1000
+        </div>
+        <div
+          onClick={() => {
+            setDeadline(3 * 1000 + Date.now());
+          }}
+        >
+          3 * 1000
         </div>
         <div
           onClick={() => {
             setDeadline(2 * 1000 + Date.now());
           }}
         >
-          2
+          2 * 1000
         </div>
         <div
           onClick={() => {
             setDeadline(1 * 1000 + Date.now());
           }}
         >
-          1
+          1 * 1000
         </div>
         <div
           onClick={() => {