angular2倒计时组件使用详解  更新时间:2017年01月12日 14:12:07   作者:weixin_36333953   这篇文章主要为大家详细介绍了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 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章: 详解Angular 4.x 动态创建组件 Angular 2父子组件数据传递之@ViewChild获取子组件详解 Angular2学习教程之组件中的DOM操作详解 angular中不同的组件间传值与通信的方法 Angular父组件调用子组件的方法 Angular5给组件本身的标签添加样式class的方法 Angular 2父子组件数据传递之@Input和@Output详解(下) Angular入口组件(entry component)与声明式组件的区别详解 详解angular2封装material2对话框组件 简单谈谈Angular中的独立组件的使用 angular2 倒计时 组件 相关文章 AngularJs实现分页功能不带省略号的代码 这篇文章主要介绍了AngularJs实现分页功能不带省略号的代码的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-05-05 angularjs在ng-repeat中使用ng-model遇到的问题 本文给大家分享了一个个人在使用angular过程中遇到的在ng-repeat中使用ng-model的问题,并附上简单的解决办法,希望能对大家学习angular有所帮助 2016-01-01 AngularJS 实现点击按钮获取验证码功能实例代码 本文通过实例代码给大家介绍了AngularJS 实现点击按钮获取验证码功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-07-07 Angular利用内容投射向组件输入ngForOf模板的方法 本篇文章主要介绍了Angular利用内容投射向组件输入ngForOf模板的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 angular过滤器实现排序功能 这篇文章主要为大家详细介绍了angular过滤器实现排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-06-06 angular.js和vue.js中实现函数去抖示例(debounce) 这篇文章主要介绍了angular.js和vue.js中实现函数去抖示例(debounce),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 Angular入口组件(entry component)与声明式组件的区别详解 这篇文章主要给大家介绍了关于Angular入口组件(entry component)与声明式组件的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-04-04 AngularJS 验证码60秒倒计时功能的实现 最近在做AngularJS 项目,这是写的一个60秒倒计时功能,下面小编给大家介绍AngularJS 验证码60秒倒计时功能的实现,需要的朋友参考下吧 2017-06-06 使用Raygun来自动追踪AngularJS中的异常 这篇文章主要介绍了使用Raygun来自动追踪AngularJS中的异常,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下 2015-06-06 基于Angular 8和Bootstrap 4实现动态主题切换的示例代码 这篇文章主要介绍了基于Angular 8和Bootstrap 4实现动态主题切换的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-02-02 最新评论

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

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

组件效果

变量

组件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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解Angular 4.x 动态创建组件
  • Angular 2父子组件数据传递之@ViewChild获取子组件详解
  • Angular2学习教程之组件中的DOM操作详解
  • angular中不同的组件间传值与通信的方法
  • Angular父组件调用子组件的方法
  • Angular5给组件本身的标签添加样式class的方法
  • Angular 2父子组件数据传递之@Input和@Output详解(下)
  • Angular入口组件(entry component)与声明式组件的区别详解
  • 详解angular2封装material2对话框组件
  • 简单谈谈Angular中的独立组件的使用
张贴在3