rc-countdown-flip

demo

Install

yarn add rc-countdown-flip

Basic Usage

import FlipCountDown from "rc-countdown-flip";

<FlipCountDown
  option={{
    leftSecond: 100,
    format: "hh:mm:ss",
    end: () => {
      alert("end");
    },
    style: {
      color: "black",
      background: "white"
    },
    standard: "50px"
  }}
/>;

Attribute

name	含义	默认值	说明
leftSecond	剩余时间	0
format	格式	dd:hh:mm:ss	区分大小写，:是分隔符，可以修改
style	样式（只能设置 color 和 background）	{color: 'white', background: 'black'}
standard	基准大小	100px	即：高。同比例放大缩小

Method

name	含义	默认值
end	结束的回调方法

TIPS

1. 设置样式

样式修改主要用到两个属性 style 和 standard。
style 只支持 color 和 background。字面意思。字体颜色和背景，但是分隔符使用的是 background 需要注意。

<FlipCountDown
  option={{
    leftSecond: 86400 * 2 + 5,
    format: "dd:hh:mm:ss",
    style: {
      color: "#47858b",
      background: "#e4f4f3"
    },
    standard: "80px"
  }}
/>

2. format 使用

format 默认为 'dd:hh:mm:ss'。
区分大小写。当使用大写的时候，最大值变成 100，而不是我们常规理解中的小时 24、分钟秒 60 了。主要是为了解决如倒计时 2 天，但不想显示天的，设置 HH:mm:ss，会显示为 48:00:00。
注意 当所有的值都设置为 大写 的时候，你可以会觉得有些奇怪，看一下我上面说的，最大值为 100，你可能会理解。

<FlipCountDown
  option={{
    leftSecond: 86400 * 2 + 5,
    format: "HH:mm:ss"
  }}
/>