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 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 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_MySQL教程-第一天
2007/03/18 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php检测useragent版本示例
2014/03/24 PHP
php格式化时间戳
2016/12/17 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python解惑之True和False详解
2017/04/24 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
深入了解Django View(视图系统)
2019/07/23 Python
django中的数据库迁移的实现
2020/03/16 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python能开发游戏吗
2020/06/11 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
门卫人员岗位职责
2013/12/24 职场文书
高中军训感想300字
2014/03/04 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
热情服务标语
2014/10/07 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书