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

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. vue-cli3 chainWebpack配置,去除打包后文件的预加载prefetch/preload(已解决)

    //细节配置修改 chainWebpack: config => { console.log(config,'chainWebpack') // 移除 prefetch 插件 config.pl ...

  2. poj3250 Bad Hair Day 单调栈(递减)

    Bad Hair Day Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 24420   Accepted: 8292 Des ...

  3. vs2010启动越来越慢解决方法

    自己用的电脑中vs2010启动总是越来越慢,耽误时间,用了下面的方法试了一下,效果还不错,如果你的vs2010也是,遇到这种问题不妨试一试: 1.重新设置了vs2010的环境(在vs2010命令提示符 ...

  4. ActionBarCompat 教程-实现Action Bar

    http://www.mobiletuts.me 自Action Bar设计概念在Android 3.0(API 11) 中被Google引入以后,Action Bar这种设计模式迅速被各APP厂商( ...

  5. java翻译到mono C#实现系列(4) 利用CountDownTimer类实现倒计时功能 mono版

    群里的朋友问利用CountDownTimer类实现倒计时功能怎么实现,我就百度了,参考http://blog.csdn.net/qq344429461/article/details/7521361写 ...

  6. Spring由于web配置导致的spring配置文件找不到的问题的解决方案

    在把某项技术整合到Spring中的时候,我们时常会发现报如下错误: org.springframework.beans.factory.BeanCreationException: Error cre ...

  7. 11 java 线程池 使用实例

    在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统 ...

  8. ASP.NET MVC Web API 学习笔记---联系人增删改查

    本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查. 目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的. 下面我们通过创建一个简单的Web API来管理 ...

  9. Linux笔记-vim 配置

    本文是转载的,我用的ubuntu12.04在vim设置方面就是参考了本文,拿来分享给大家! ubuntu10.10中的设置方法: $cd /etc/vim $sudo cp vimrc vimrc.b ...

  10. Charles 抓取 iphone https的设置方式

    1. Charles:  help > SSL Proxying > Install Charles Root Certificate, 2. 将会打开 钥匙串访问 的功能,查找 Char ...