README

FlipDown

⏰ 轻量级且性能良好的翻转样式倒计时时钟。

特性

💡 轻量级 - 无需 jQuery！<11KB 最小化包
⚡ 高性能 - 由 CSS 过渡驱动的动画
📱 响应式 - 在各种尺寸的屏幕上表现良好
🎨 主题化 - 选择内置主题，或添加自己的主题
🌍 i18n - 可自定义语言标题

示例

示例直播在：https://pbutcher.uk/flipdown/

在 CodePen 上重混 FlipDown：https://codepen.io/PButcher/pen/dzvMzZ

基本用法

要开始，可以克隆此存储库或使用 npm install flipdown 或 yarn add flipdown 进行安装。

对于基本用法，FlipDown 以秒为单位的 Unix 时间戳作为参数。

new FlipDown(1538137672).start();

将 CSS 和 JS 包含在 <head> 中，并在您的 HTML 中包含以下行。

<div id="flipdown" class="flipdown"></div>

完整示例请见此处。

多个实例

要在同一页面上使用多个 FlipDown 实例，请将 DOM 元素 ID 作为 FlipDown 构造函数的第二个参数指定。

new FlipDown(1588017373, "registerBy").start();
new FlipDown(1593561600, "eventStart").start();

<div id="registerBy" class="flipdown"></div>
<div id="eventStart" class="flipdown"></div>

主题

FlipDown 默认附带 2 个主题

dark [默认]
light

要更改主题，可以在构造函数中的 opt 对象中提供 theme 属性，并用主题名称作为字符串

{
  theme: "light";
}

例如，要使用浅色主题实例化 FlipDown

new FlipDown(1538137672, {
  theme: "light",
}).start();

自定义主题

可以通过添加新的样式表来添加自定义主题，使用 FlipDown 的主题模板。

FlipDown 主题必须具有类名前缀：.flipdown__theme- 后跟您的主题名称。例如，标准主题的类名如下

.flipdown__theme-dark
.flipdown__theme-light

然后可以通过在构造函数的 opt 对象中指定 theme 属性来加载您的主题（见主题）。

标题

您可以通过将数组作为 opt 对象的一部分传递来添加自己的转盘组标题。请注意，这不会改变转盘的功能（例如，'天'转盘不会神奇地开始计算月份，因为您传递了 '月份' 作为标题）。

建议使用 i18n。用法如下

new FlipDown(1538137672, {
  headings: ["Nap", "Óra", "Perc", "Másodperc"],
}).start();

请注意，如果没有提供，标题将默认为英语：["Days", "Hours", "Minutes", "Seconds"]

API

`FlipDown.prototype.constructor(uts, [el], [opts])`

创建一个新的 FlipDown 实例。

参数

`uts`

类型：number

要倒计时到的 Unix 时间戳（以秒为单位）。

`[el]`

可选
类型：string（默认：flipdown）

将此 FlipDown 实例附加到的 DOM 元素 ID。默认为 flipdown。

`[opts]`

可选
类型：object（默认：{}）

可选地指定额外的配置设置。目前支持的设置包括

theme
headings

`FlipDown.prototype.start()`

开始倒计时。

`FlipDown.prototype.ifEnded(callback)`

倒计时结束后调用函数。

参数

`callback`

类型：function

倒计时结束后执行的函数。

示例

var flipdown = new FlipDown(1538137672)

  // Start the countdown
  .start()

  // Do something when the countdown ends
  .ifEnded(() => {
    console.log("The countdown has ended!");
  });

致谢

感谢以下人员提出的建议/修复

@chuckbergeron 在使 FlipDown 响应式方面提供了帮助。
@vasiliki-b 发现并修复了 Safari 中的 backface-visibility 问题。
@joeinnes 为转子组标题添加了 i18n 支持。

levmyshkin / flipdown

维护者

详细信息