angular2 倒计时组件

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

组件需求如下：
- 接收父级组件传递截止日期
- 接收父级组件传递标题

---

组件效果

---

变量

变量名 类型 描述 @Input() endTime number 接收父组件传递截止时间 @Input() title string 接收父组件传递标题 hour number 小时差 minute number 分钟差 second number 秒差 diff number 总计相差秒数

---

组件countdown.html代码

<div class="count-down">    <div class="title">        <h4>            {{title}}        </h4>    </div>    <div class="body">        <div class="content">            <div class="top">                {{hour}}            </div>            <div class="bottom">                小时            </div>        </div>        <div class="content">            <div class="top">                {{minute}}            </div>            <div class="bottom">                分钟            </div>        </div>        <div class="content">            <div class="top">                {{second}}            </div>            <div class="bottom">                秒            </div>        </div>    </div></div>

---

组件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%;            float: 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

<roy-countdown title="距离考试还有：" [endDate]="endDate"></roy-countdown>

---

欢迎留言交流，互相探讨 angular2 nodejs mongodb相关知识