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%;
     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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！