189 8069 5689

angular2倒计时组件使用详解

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

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的太平网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

组件效果

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


网站题目：angular2倒计时组件使用详解
本文来源：http://cdxtjz.cn/article/pccsij.html

其他资讯