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

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. HttpURLConnection发送GET、POST请求

    HttpURLConnection发送GET.POST请求 /** * GET请求 * * @param requestUrl 请求地址 * @return */ public String get( ...

  2. Django中-事务操作

    如何在Django中进行事务操作呢? 近期,公司里要使用Django开发一套金融相关的系统. 涉及钱了.....安全安全安全 如果钱转到一半,系统崩了,咋办? 如果钱汇到一半,系统崩了,咋办? 如果东 ...

  3. PHP 中 strlen 获取中英 字符长度 以作以后对比使用

    ANSII编码: 1 长度是3 a 长度是3 ? 长度是3 我 长度是4 ?长度是2 ---------------------------- UTF-8编码: 1 长度是1 a长度是1 ? 长度是1 ...

  4. ele

    vue饿了么app项目实战视频 5-1 1.项目代码规范修改.

  5. Zip文件格式

    Overview This document describes the on-disk structure of a PKZip (Zip) file. The documentation curr ...

  6. 使用github oauth 出现 OpenSSL::SSL::SSLError - SSL_connect SYSCALL returned=5 errno=0 state=SSLv2/v3 解决

    A top level initializer is highly recommended to use: conf/initializer/tls_settings.rb OpenSSL::SSL: ...

  7. 在WPF中如何使用RelativeSource绑定

    在WPF绑定的时候,指定绑定源时,有一种办法是使用RelativeSource. 这种办法的意思是指当前元素和绑定源的位置关系. 第一种关系: Self 举一个最简单的例子:在一个StackPanel ...

  8. ognl,jstl,struts2标签中符号#,$,%的用法

    STRUTS2标签操作Map <s:iterator value="sundayMap">           <td colspan="7" ...

  9. 一起来做Chrome Extension《搭个架子》

    CEF - A simple Chrome Extension development falsework CEF是一个简单的Chrome Extension开发脚手架,它有如下功能: 模块化的结构, ...

  10. WINFORM如何实现无聚焦框的Button按钮

    当我们将一个button按钮设置如下属性时,总有一个聚焦框来困扰着我们 button1.FlatStyle = FlatStyle.Flat; 我们想要的效果是这样的: 但当使用了Tab切换焦点时 发 ...