// 声明变量
applicationInterval: any; // 定时器
nextBtnText: String;
nextBtnBool: Boolean;
// 使用定时器,每秒执行一次
ionViewDidEnter() {
let that = this;
let applicationPageOpenData: number = parseInt(((new Date().getTime() / 1000) + 120).toString()); //120是设置的秒数
let nowDte: number;
this.nextBtnText = "30秒后方可点击"; // 按钮文本
this.nextBtnBool = false; // 按钮是否可点击标识
this.applicationInterval = setInterval(() => {
nowDte = parseInt((new Date().getTime() / 1000).toString());
console.log(nowDte);
let receiveDate = applicationPageOpenData - nowDte;
if (receiveDate > 0) {
let tss = this.s_to_hs(receiveDate);
that.nextBtnText = tss + "秒后方可点击"; console.log(this.s_to_hs(receiveDate));
} else {
that.nextBtnText = "下一步";
that.nextBtnBool = true;
// 停止定时器
clearInterval(that.applicationInterval);
}
}, 1000);
}
s_to_hs(s){
//计算分钟
//算法:将秒数除以60,然后下舍入,既得到分钟数
var h;
h = Math.floor(s/60);
//计算秒
//算法:取得秒%60的余数,既得到秒数
s = s%60;
//将变量转换为字符串
h += '';
s += '';
//如果只有一位数,前面增加一个0
h = (h.length==1)?'0'+h:h;
s = (s.length==1)?'0'+s:s;
console.log(h+':'+s);
return h+':'+s;
}

ionic3+angular 倒计时效果的更多相关文章

  1. Andorid实现点击获取验证码倒计时效果

    这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文   我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...

  2. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  3. iOS 使用GCD实现倒计时效果

    在APP开发过程中,经常有需要实现倒计时效果, 比如语音验证码倒计时...代码如下: __block int timeout = 100; dispatch_queue_t queue = dispa ...

  4. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  5. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  6. javascript特效实现(4)——当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

  7. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  8. jquery网页倒计时效果,秒杀,限时抢购!

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. TweenMax & GSAP & SVG Animation

    TweenMax & GSAP & SVG Animation svg animation https://greensock.com/tweenmax GSAP https://ww ...

  2. Codeforces Round #703 (Div. 2) (A~E)

    A. Shifting Stacks 题目链接 点我跳转 题目大意 给定 \(N\) 个土堆,第 \(i\) 个土堆有 \(Ai\) 个木块 你可以将第 \(i\) 个土堆的木块转移至第 \(i + ...

  3. 在 2021 年你需要掌握的 7 种关于 JavaScript 的数组方法

    在新的一年我们学习这些有用的方法 JavaScript 为我们提供了许多处理数组的不同方法.我们将在几分钟内为您介绍 7 个基本且常用的数据方法,以提高您的 JS 开发技能. 1. Array.map ...

  4. TERSUS无代码开发(笔记04)-CSS样式设置

    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...

  5. oracle 导入导出dmp

    exp 用户名/密码@地址:端口/serviceName file=D:\710.dmp exp test710/test710@192.168.15.134:1521/doit file=D:\71 ...

  6. Java流程控制:顺序结构

    一.流程控制 Java中的流程控制语句可以这样分类:顺序结构.选择结构.循环结构.这三种结构就足够解决所有的问题了! 二.顺序结构 描述: Java流程控制的基本结构就是顺序结构,除非特别指明,否则J ...

  7. 行业动态 | 通过使用Apache Cassandra实现实时供应链管理

    借助基于Apache Cassandra的DataStax Enterprise,C&S Wholesale确实得到了他们所需要的东西--一个持续在线的仓库运作整体视图.   视图中包含了原本 ...

  8. nacos--配置中心之客户端

    nacos提供com.alibaba.nacos.api.config.ConfigService作为客户端的API用于发布,订阅,获取配置信息: ConfigService获取配置信息流程: 优先使 ...

  9. Jenkins+Python自动化测试持续集成详细教程

    ​ Jenkins是一个开源的软件项目,是基于java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.由于是基于java开发因此它也依赖jav ...

  10. STL容器整理

    1.vector c++STL中的可变长度数组,主要支持操作有:建立,添加到末尾,返回长度,调整大小,定义迭代器及对迭代器的具体操作.具体如下: 1.建立一个元素类型为int的可变长度数组v,最开始N ...