ngx-countdown

ngx-countdown

Simple, easy and performance countdown for angular

Demo

Live Demo

Usage

1. Install

npm install ngx-countdown --save

import CountdownModule。

import { CountdownModule } from 'ngx-countdown';

@NgModule({
    imports: [ BrowserModule, CountdownModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

2、Template

<countdown [config]="config" 
    (start)="onStart()"
    (finished)="onFinished()"
    (notify)="onNotify($event)"></countdown>

Name	Type	Default	Summary
config	Config		配置信息，见Config
start	Function		开始时触发
finished	onFinished		结束时触发
notify	Function(time: number)		通知时触发，需要在 Config 中配置 notify

如何重置计数器

@ViewChild(CountdownComponent) counter: CountdownComponent;
resetTimer(){
    //this.counter.config.leftTime = 5;
    this.counter.restart();
}

当然，也可以通过重新赋值 config 参数，也能达到一样的效果。

Config

Name	Type	Default	Summary
template	string	$!h!时$!m!分$!s!秒	自定义模板，如果为空以组件 innerHTML 为准，再不然使用默认值。$!s! 有另一种表示法 $!s-ext! 表示0.1s精度。
size	string	lite	lite、medium、large 三种不同风格，见DEMO
leftTime	number	0	剩余时间：指的是根据服务端计算剩余时间值进行倒计时，支持0.1s精度，但有可能会出现丢帧的情况。（单位：秒）
stopTime	number	0	结束时间：指的是根据本地时间至结束时间进行倒计时。（单位：UNIX时间戳 ms）
varRegular	RegExp	/\$\{([\-\w]+)\}/g	模板解析正则表达式，有时候由于模板结构比较特殊，无法根据默认的表达式进行解析，那就需要修改它。
clock	Array		时钟控制数组，特殊需求时可以修改，里面是三元组：指针名、进制、位数，可参考大于99小时demo
notify	number[]		第xx秒时调用 notify 函数，值必须是正整数
className	string		自定义类名
repaint	Function		自定义重绘

关于重绘

重绘是指当Timer一次跳动时会执行一次（如果是0.1s精度的，会更频繁）；因此，可以制定一些不一样的效果。有关细节可以参考 Flip。

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)