angular2倒计时组件使用详解

项目中遇到倒计时需求，考虑到以后在其他模块也会用到，就自己封装了一个组件。便于以后复用。
组件需求如下：
- 接收父级组件传递截止日期
- 接收父级组件传递标题
组件效果

变量

组件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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。