angular2倒计时组件使用详解

angular2倒计时组件使用详解

项目中遇到倒计时需求，考虑到以后在其他模块也会用到，就自己封装了一个组件。便于以后复用。

组件需求如下：

- 接收父级组件传递截止日期

- 接收父级组件传递标题

组件效果

变量

组件countdown.html代码

{{title}}

{{hour}}

小时

{{minute}}

分钟

{{second}}

秒

组件countdown.scss代码

.count-down{

width:100%;

height:100px;

background: rgba(0,0,0,0.5);

padding: 2px 0;

.body{

margin-top: 8px;

.content{

width:29%;

floahttp://t: left;

margin: 0 2%;

.top{

font-size: 20px;;

line-height: 30px;

color: black;

background: white;

border-bottom: 2px solid black;

}

.bottom{

font-size: 14px;

line-height: 20px;

background: grey;

}

}

}

}

组件countdown.component.ts代码

import { Component, OnInit, Input, OnDestroy, AfterViewInit } from '@angular/core';

@Component({

selector: 'roy-countdown',

templateUrl: './countdown.component.html',

styleUrls: ['./countdown.component.scss']

})

export class CountdownComponent implements AfterViewInit, OnDestroy {

// 父组件传递截止日期

@Input() endDate: number;

// 父组件传递标题

@Input() title: string;

// 小时差

private hour: number;

// 分钟差

private minute: number;

// 秒数差

private second: number;

// 时间差

private _diff: number;

private get diff() {

return this._diff;

}

private set diff(val) {

this._diff = Math.floor(val / 1000);

this.hour = Math.floor(this._diff / 3600);

this.minute = Math.floor((this._diff % 3600) / 60);

this.second = (this._diff % 3600) % 60;

}

// 定时器

private timer;

// 每一秒更新时间差

ngAfterViewInit() {

this.timer = setInterval(() => {

this.diff = this.endDate - Date.now();

}, 1000);

}

// 销毁组件时清除定时器

ngOnDestroy() {

if (this.timer) {

clearInterval(this.timer);

}

}

}

使用方法demo.html

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。