// 声明变量
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. npm published cli package's default install missing the `-g` flag

    npm published cli package's default install missing the -g flag https://npm.community/t/npm-publishe ...

  2. DOMParser & SVG

    DOMParser & SVG js parse html to dom https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser ...

  3. gitLab的使用 和 git 、 github、gitlab的区别

    一.git . github.gitlab的区别  (百度相关内容得到的理解) ​ ​ 二.git最基本作用:版本控制 ​ 三.有集成了git的GIT安装包 github和gitlab都使用git该版 ...

  4. vue_webpack

    1.生成项目工程描述文件 npm init 2.安装webpack开发依赖 (本地安装):npm install -D 3.(webpack4.0版本以上安装webpack cli) npm inst ...

  5. hive分区分桶

    目录 1.分区 1.1.静态分区 1.1.1.一个分区 1.1.2.多个分区 1.2.动态分区 2.分桶 1.分区 如果一个表中数据很多,我们查询时就很慢,耗费大量时间,如果要查询其中部分数据该怎么办 ...

  6. GPU 总结

    What features of GPUs allow them to perform computations faster than a typical CPU? GPUs have a mass ...

  7. 第44天学习打卡(JUC 线程和进程 并发和并行 Lock锁 生产者和消费者问题 如何判断锁(8锁问题) 集合类不安全)

    什么是JUC 1.java.util工具包 包 分类 业务:普通的线程代码 Thread Runnable 没有返回值.效率相比Callable相对较低 2.线程和进程 进程:一个程序.QQ.exe, ...

  8. Django登录使用的技术和组件

    登录 ''' 获取用户所有的数据 每条数据请求的验证 成功之后获取所有正确的信息 失败则显示错误信息 ''' #登陆页面管理 def login(request): if request.method ...

  9. secure 审计暴力登陆

    文件路径 cd /var/log -rw------- 1 root root 1200063 Aug 10 20:04 secure 做应急响应,或者做脚本监控的时候,都可以参考如下特征 ... A ...

  10. 不用typsescript也能使用类型增强功能

    由于 JS 的弱类型.宽松的编写规范.以及开发工具的弱鸡支持,我们在维护前人的代码时,经常会出现不知道某一个方法或字段命名来自于哪里,一定要在全局搜索以后慢慢筛查才能找到 同样我们在使用接口返回的对象 ...