使用定时器时离开页面需要清除定时器,清除的方法有两种分别针对页面有缓存和没有缓存

1、页面有缓存

2、页面没有缓存

angularjs倒计时首先需要注入:$interval

  • 60s倒计时
 vm.secDown = 60;//倒计时设置
vm.stopTime = $interval(getTimeDown, 1000);//将$interval放入一个实体中 //倒计时60s
function getTimeDown() {
if (vm.secDown > 1) {
vm.secDown--;
}
else
{
$interval.cancel(vm.stopTime);//取消循环
vm.isDisplay = true;
}
}
  • 分和秒的倒计时,下面是30分钟倒计时:29:59-----00:00
 vm.MinuteDown = 29;
vm.secondDown = 59; //倒计时入口
function timeCountDown() {
vm.downTime = vm.MinuteDown + ':' + vm.secondDown;
$interval(timeDisplay, 1000);
} //计算倒计时显示
function timeDisplay() {
if (vm.secondDown < 10) {
vm.downTime = vm.MinuteDown + ':0' + vm.secondDown; } else {
vm.downTime = vm.MinuteDown + ':' + vm.secondDown;
}
vm.secondDown--;
if (vm.secondDown < 0) {
vm.secondDown = 59;
vm.MinuteDown--;
}
if(vm.MinuteDown==0 && vm.secondDown==0){
$interval.cancel(vm.stopTime);
} }
  • 总倒计时:***天***时***分***秒
       //开始倒计时
vm.timer = $interval(countDownHandle, 1000); //倒计时处理方法
function countDownHandle() {
angular.forEach(vm.goodsLists, function(item, index) { vm.valStart = new Date(item.startTime);
vm.valEnd = new Date(item.endTime);
item.dateDiff--;
if (!item.dateDiff) {
if (vm.todayDate.getTime() > vm.valStart.getTime()) {
//即将开始
item.dateDiff = vm.todayDate.getTime() - vm.valStart.getTime();
} else if (vm.valEnd.getTime() > vm.todayDate.getTime()) {
//距离结束倒计时
item.dateDiff = vm.valEnd.getTime() - vm.todayDate.getTime();
}
item.dateDiff = item.dateDiff/1000; //将毫秒转为秒
}
convertToTime(item);//计算秒数对应的天数、小时、分钟
});
} //将时间转换为正常显示的时间
function convertToTime(item) { //计算相差天数
vm.days = Math.floor(item.dateDiff / (24 * 3600)); //计算小时数
vm.leaveMsec1 = item.dateDiff % (24 * 3600); //计算天数后剩余毫秒数
vm.hours = Math.floor(vm.leaveMsec1 / (3600)); //计算相差分钟数 vm.leaveMsec2 = vm.leaveMsec1 % (3600 ); //计算小时数后剩余的毫秒数
vm.minutes = Math.floor(vm.leaveMsec2 / (60 )); //计算相差毫秒数 vm.leaveMsec3 = vm.leaveMsec2 % (60); //计算分钟数后剩余毫秒数
vm.seconds = Math.round(vm.leaveMsec3);
//补位
item.days = vm.days < 10 ? ('0' + vm.days) : vm.days;
item.hours = vm.hours < 10 ? ('0' + vm.hours) : vm.hours;
item.minutes = vm.minutes < 10 ? ('0' + vm.minutes) : vm.minutes;
item.seconds = vm.seconds < 10 ? ('0' + vm.seconds) : vm.seconds;
console.log(item.days+'天'+item.hours+':'+item.minutes+':'+item.seconds)
if (item.days == 0 && item.hours == 0 && item.minutes == 0 && item.seconds == 0) {
$interval.cancel(vm.timer);
} }

七、angularjs 倒计时的更多相关文章

  1. 学习Angular1

    教程: 参考教程: https://www.runoob.com/angularjs/angularjs-tutorial.html 一.angular的简介AngularJS 是一个 JavaScr ...

  2. AngularJs的UI组件ui-Bootstrap分享(七)——Buttons和Dropdown

    在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的 ...

  3. [学习笔记] 七步从AngularJS菜鸟到专家(7):Routing [转]

    这是"AngularJS – 七步从菜鸟到专家"系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...

  4. [学习笔记] 七步从AngularJS菜鸟到专家(6):服务 [转]

    这是"AngularJS – 七步从菜鸟到专家"系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们 ...

  5. [学习笔记] 七步从AngularJS菜鸟到专家(4和5):指令和表达式 [转]

    这一篇包含了"AngularJS - 七步从菜鸟到专家"系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘 ...

  6. 七步从AngularJS菜鸟到专家(7):Routing

    这是"AngularJS – 七步从菜鸟到专家"系列的第七篇. 在第一篇,我们展示了如何開始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives.上一篇了解 ...

  7. AngularJS之中级Route【二】(七)

    前言 上一篇我们介绍了AngularJS内置的路由ngRoute,我们知道AngularJS被广泛应用于单页应用SPA(Single Page Application)中,此时路由对于我们来讲非常重要 ...

  8. 走进AngularJs(七) 过滤器(filter) - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  9. angularjs使用directive实现倒计时按钮

    前不久在做一个彩票的项目时,有一个手动开奖的需求.所以有了这个倒计时按钮.下面分享下具体的代码: 效果: 代码: App.directive('timerBtn', function() { // 倒 ...

随机推荐

  1. 分布问题(二元,多元变量分布,Beta,Dir)

    这涉及到数学的概率问题. 二元变量分布:       伯努利分布,就是0-1分布(比如一次抛硬币,正面朝上概率) 那么一次抛硬币的概率分布如下: 假设训练数据如下: 那么根据最大似然估计(MLE),我 ...

  2. FreeRTOS-07内核控制函数

    根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 内核控制函数:

  3. e的理解

    1. e是一个重要的常数,但是我一直不知道,它的真正含义是什么. 它不像π.大家都知道,π代表了圆的周长与直径之比3.14159,可是如果我问你,e代表了什么.你能回答吗? 维基百科说: " ...

  4. Linux系统编程:线程控制

    一.提出问题 问1.线程存在的意义是什么?什么时候适合使用多线程? 答1.在单进程环境中实现多任务,线程可访问其所在进程的资源,例如内存.描述符等.对于单进程,如果要完成多项任务,这些任务只能依次执行 ...

  5. 【文档】五、Mysql Binlog事件结构

    这个部分描述了事件被写入binlog或者delay log中的属性.所有的事件有相同的整体结构,也就是包含事件头和事件数据: +===================+ | event header ...

  6. 创建自己的加密货币MNC——以太坊代币(二)

    创建一个基于以太坊平台的分红币MNC,根据持有的代币数量,进行分红的算法.github地址: https://github.com/lxr1907/MNC 1.使用以太坊根据比例换购token MNC ...

  7. CentOS/Linux 解决 SSH 连接慢

    现在连接linux服务器一般都是使用SSH远程连接的方式.最近新装了一台服务器,发现telnet时速度很快,ping时一切也正常,但SSH连接的时候却很慢.经过网上资料查询,大致是有以下几种原因: 1 ...

  8. mysql 索引使用策略及优化

    索引使用策略及优化 MySQL的优化主要分为结构优化(Scheme optimization)和查询优化(Query optimization).本章讨论的高性能索引策略主要属于结构优化范畴.本章的内 ...

  9. 分享一个好用的dns

  10. golang代码片段(摘抄)

    以下是从golang并发编程实战2中摘抄过来的代码片段,主要是实现一个简单的tcp socket通讯(客户端发送一个数字,服务端计算该数字的立方根然后返回),写的不错,用到了go的并发以及看下郝林大神 ...