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 ...
随机推荐
- Node.js & ES modules & .mjs
Node.js & ES modules & .mjs Node.js v13.9.0 https://nodejs.org/api/esm.html https://nodejs.o ...
- 2021 NGK生态所体验好、交易快 引人注目!
据悉,NGK计划于2021年2月15日正式上线自己的生态所(时间待定),目的在于满足NGK生态建设者对于NGK几大币种的交易等需求,如NGK.BGV.SPC.USDN.VAST等.只要上NGK生态所, ...
- SPC空投搅动市场,NGK算力持有者或成大赢家!
要说公链3.0的顶级代表是谁,恐怕非NGK公链莫属.NGK公链自诞生以来,便在区块链市场掀起了一波又一波热潮,并不断地打造着属于自己独有的生态体系.从NGK公链到Baccarat,再到呼叫河马,几乎每 ...
- C#使用OpenCV剪切图形中的人物头像
前言 本文主要介绍如何使用OpenCV剪切图形中的人物头像. 准备工作 首先创建一个Wpf项目--OpenCV_Face_Wpf,这里版本使用Framework4.7.2. 然后使用Nuget搜索[E ...
- 1071 Speech Patterns——PAT甲级真题
1071 Speech Patterns People often have a preference among synonyms of the same word. For example, so ...
- 微信小程序:将yyyy-mm-dd格式的日期转换成yyyy-mm-dd hh:mm:ss格式的日期
代码如下: changeDate1(e) { console.log(e); var date = new Date(e.detail.value); console.log(date); const ...
- MarkDown简单语法回顾
写在前面: 本文是我的第一篇博客文章,希望与大家共同交流.分享我们热爱的技术,努力成为一名优秀的软件工程师! 进入正文 使用MarkDown记笔记已经有些时候了,编辑器是使用的sublime text ...
- 并发\并行,同步\异步,阻塞\非阻塞,IO多路复用解释
并发.并行 并发:是指一个时间段内,有几个程序在同一个CPU上运行,但是任意时刻只有一个程序在CPU上运行.由于CPU的运行速度极快,可以在多个程序之间切换,这样造成一个假象就是多个程序同时在运行.并 ...
- Course2.1 Graph Paper Programming
Overview 通过日常生活中的活动来体验程序算法,目标时能够将现实世界的场景与程序场景关联起来. Objective 抓住将现实世界问题转换为程序的难点: 你认为非常明确的指令在计算机看来可能还是 ...
-
转: 微信已支持发送最大 200MB 的视频了,并且不会被压缩 来自腾讯微信团队的视频消息,目前 iOS 版本的微信已支持发送最大 200MB 的视频与图片了,并且不会被压缩.安卓版本未来一段时间会支 ...