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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
js作用域及作用域链工作引擎
Jul 07 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防止form重复提交的方法
2013/07/01 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP实现八皇后算法
2019/05/06 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python中实现延时回调普通函数示例代码
2017/09/08 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
法人授权委托书格式
2014/04/08 职场文书
霸气队列口号
2014/06/18 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
小学校本教研总结
2015/08/13 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python