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

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. Java Web入门学习(一) STS与Tomcat配置

    Java Web学习(一) STS与Tomcat配置 一.IDE的选择 使用基于Eclipse的STS Ide ,个人感觉挺好用的. 地址:http://spring.io/tools/sts 根据以 ...

  2. html-css-js基本理解和简单总结

    目录 一.对于网页的基本理解 1.网页是一种数据展示和信息交互的载体 2.网页组成部分 3.支撑一个网页的技术模块 二.html的理解和技术笔记 1.html理解 2.html技术笔记-html标签 ...

  3. 爬虫URL去重

    这个要看你想抓取的网页数量是哪种规模的.如果是千万以下用hash表, set, 布隆过滤器基本可以解决,如果是海量的......嗯我也没做过海量的,不过hash表之类的就别想了,内存根本不够,分割线下 ...

  4. AngularJS Eclipse Plugin

    本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine ...

  5. 使用单体模式设计原生js插件

    ----------基于上次写的jquery插件进行改造  http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery ...

  6. 入门系列之使用fail2ban防御SSH服务器的暴力破解攻击

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由SQL GM发表于云+社区专栏 介绍 对于SSH服务的常见的攻击就是暴力破解攻击--远程攻击者通过不同的密码来无限次地进行登录尝试.当 ...

  7. Android Anwendungsprogramm Entwicklung

    1.Einführung des Androids 1.1 Grundlage der Anwendung Activity ist eine Spezifische Bespiel von Andr ...

  8. JavaScript三大对象详细解说

    Js三大对象 一 浏览器对象 浏览器窗口.文档document.URL地址等 常用的浏览器对象: 浏览器对象的分层结构 Window对象 (1) 属性 名称 说明 document 表示给定浏览器窗口 ...

  9. D3基础--数轴

    转载请注明出处! 概述: 与比例尺类似,D3的数轴实际上也使用来定义参数的函数.但与比例尺不同的是,调用数轴函数并不会返回值,而是会生成数轴相关的可见元素.包括:轴线,标签和刻度. 但是要注意数轴函数 ...

  10. c#参数修饰符-out

    out 关键字通过引用传递参数. 方法定义和调用方法必须显式使用out关键字: 调用方法时参数不必初始化,方法内必须对其赋值: 参数中可以声明多个out修饰的参数. 例: public void Us ...