ionic3+angular 倒计时效果
// 声明变量
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 倒计时效果的更多相关文章
- Andorid实现点击获取验证码倒计时效果
这篇文章主要介绍了Andorid实现点击获取验证码倒计时效果,这种效果大家经常遇到,想知道如何实现的,请阅读本文 我们在开发中经常用到倒计时的功能,比如发送验证码后,倒计时60s再进行验证码的获取 ...
- jQuery Countdown Timer 倒计时效果
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
- iOS 使用GCD实现倒计时效果
在APP开发过程中,经常有需要实现倒计时效果, 比如语音验证码倒计时...代码如下: __block int timeout = 100; dispatch_queue_t queue = dispa ...
- js实现倒计时效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...
- 超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- jquery网页倒计时效果,秒杀,限时抢购!
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [jQuery编程挑战]006 生成一个倒计时效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- 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 ...
- DOMParser & SVG
DOMParser & SVG js parse html to dom https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser ...
- gitLab的使用 和 git 、 github、gitlab的区别
一.git . github.gitlab的区别 (百度相关内容得到的理解) 二.git最基本作用:版本控制 三.有集成了git的GIT安装包 github和gitlab都使用git该版 ...
- vue_webpack
1.生成项目工程描述文件 npm init 2.安装webpack开发依赖 (本地安装):npm install -D 3.(webpack4.0版本以上安装webpack cli) npm inst ...
- hive分区分桶
目录 1.分区 1.1.静态分区 1.1.1.一个分区 1.1.2.多个分区 1.2.动态分区 2.分桶 1.分区 如果一个表中数据很多,我们查询时就很慢,耗费大量时间,如果要查询其中部分数据该怎么办 ...
- GPU 总结
What features of GPUs allow them to perform computations faster than a typical CPU? GPUs have a mass ...
- 第44天学习打卡(JUC 线程和进程 并发和并行 Lock锁 生产者和消费者问题 如何判断锁(8锁问题) 集合类不安全)
什么是JUC 1.java.util工具包 包 分类 业务:普通的线程代码 Thread Runnable 没有返回值.效率相比Callable相对较低 2.线程和进程 进程:一个程序.QQ.exe, ...
- Django登录使用的技术和组件
登录 ''' 获取用户所有的数据 每条数据请求的验证 成功之后获取所有正确的信息 失败则显示错误信息 ''' #登陆页面管理 def login(request): if request.method ...
- secure 审计暴力登陆
文件路径 cd /var/log -rw------- 1 root root 1200063 Aug 10 20:04 secure 做应急响应,或者做脚本监控的时候,都可以参考如下特征 ... A ...
- 不用typsescript也能使用类型增强功能
由于 JS 的弱类型.宽松的编写规范.以及开发工具的弱鸡支持,我们在维护前人的代码时,经常会出现不知道某一个方法或字段命名来自于哪里,一定要在全局搜索以后慢慢筛查才能找到 同样我们在使用接口返回的对象 ...