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 ...
随机推荐
- DevOps tools
DevOps tools mozart & ansible https://www.ansible.com/integrations/devops-tools websocket jenken ...
- postman功能介绍
- 07_MySQL修改数据库的表结构
修改数据库的表结构
- C#关于panle重叠
当多个panle重叠不显示不出来的时候 选择视图---------------其它窗口----------------文档大纲 然后拖动进行调整
- 力扣350. 两个数组的交集 II
原题 1 class Solution: 2 def intersect(self, nums1: List[int], nums2: List[int]) -> List[int]: 3 di ...
- SOLID架构设计原则
最近通读了<架构整洁之道>,受益匪浅,遂摘选出设计原则部分,与大家分享,希望大家能从中获益. 以下为书中第3部分 设计原则的原文. 设计原则概述 通常来说,要想构建-个好的软件系统,应该从 ...
- 12张图打开JMeter体系结构全局视角
JMeter是Java技术栈工具,在软件测试领域应用非常广泛,无论是性能测试还是接口测试,技术都很成熟和稳定.它有一个突出特点:开源,适合做二次开发,以阿里为代表的Java技术栈公司都对它青睐有加.在 ...
- HDOJ-1069(动态规划+排序+嵌套矩形问题)
Monkey and Banana HDOJ-1069 这里实际是嵌套矩形问题的变式,也就是求不固定起点的最长路径 动态转移方程为:dp[i]=max(dp[j]+block[i].h|(i,j)∈m ...
- CentOS7 下 MySQL 5.7.23 & XtraBackup 24 做数据备份(1)——安装软件
在两台机子上同时操作下面的步骤 首先安装MySQL,从官网下载相对应版本的RPM包 mysql-community-client-5.7.23-1.el7.x86_64.rpm mysql-commu ...
- pytorch(05)计算图
张量的一系列操作,增多,导致可能出现多个操作之间的串行并行,协同不同的底层之间的协作,避免操作的冗余.计算图就是为了解决这些问题产生的. 计算图与动态图机制 1. 计算图 计算图用来描述运算的有向无环 ...