angular倒計時組件如何使用

這篇文章主要介紹“angular倒計時組件如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“angular倒計時組件如何使用”文章能幫助大家解決問題。

組件countdown.html代碼

<div class="count-down"> <div class="title"> <h5> {{title}} </h5> </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倒計時組件如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。