我的编程空间,编程开发者的网络收藏夹
学习永远不晚

angular倒计时组件如何使用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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倒计时组件如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

angular倒计时组件如何使用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何在canvas中使用环形倒计时组件

这篇文章将为大家详细讲解有关如何在canvas中使用环形倒计时组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时
2023-06-09

React如何实现倒计时组件

这篇文章将为大家详细讲解有关React如何实现倒计时组件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。倒计时组件——需求描述:写一个函数式组件CountDown,设置一个传入最大值
2023-06-29

如何利用momentJs做一个倒计时组件

今天就跟大家聊聊有关如何利用momentJs做一个倒计时组件,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。vue和moment做的一个倒计时展示样式: