angular2倒计时组件使用详解


Posted in Javascript onJanuary 12, 2017

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

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

组件效果

angular2倒计时组件使用详解

变量

angular2倒计时组件使用详解

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

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

Javascript 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
纯js实现倒计时功能
Jan 06 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
js中常用的Math方法总结
Jan 12 #Javascript
Vue数据驱动模拟实现4
Jan 12 #Javascript
移动端点击态处理的三种实现方式
Jan 12 #Javascript
js手机号批量滚动抽奖实现代码
Apr 17 #Javascript
js图片轮播手动切换特效
Jan 12 #Javascript
You might like
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
Vue事件处理原理及过程详解
2020/03/11 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
Python列表推导式与生成器用法分析
2018/08/02 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
如何验证python安装成功
2020/07/06 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
对公司合理化的建议书
2014/03/12 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
代办出身证明书
2014/10/21 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年父亲节寄语
2015/12/04 职场文书