七、angularjs 倒计时

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

1、页面有缓存

2、页面没有缓存

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

60s倒计时

 vm.secDown = 60;//倒计时设置vm.stopTime = $interval(getTimeDown, 1000);//将$interval放入一个实体中//倒计时60sfunction 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 倒计时相关推荐

七步从AngularJS菜鸟到专家（7）：Routing
这是＂AngularJS – 七步从菜鸟到专家＂系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...
七步从AngularJS菜鸟到专家（6）：服务
这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们 ...
七步从AngularJS菜鸟到专家（4和5）：指令和表达式
这一篇包含了＂AngularJS - 七步从菜鸟到专家＂系列的第四篇(指令)和第五篇(表达式). 之前的几篇展示了我们应用的核心组件,以及如何设置搭建一个Angular.js应用.在这一部分,我们会厘 ...
[学习笔记] 七步从AngularJS菜鸟到专家（6）：服务 [转]
这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第五篇我们讨论了Angular内建的directives.在这一章,我们 ...
AngularJS之中级Route【二】（七）
前言上一篇我们介绍了AngularJS内置的路由ngRoute,我们知道AngularJS被广泛应用于单页应用SPA(Single Page Application)中,此时路由对于我们来讲非常重要 ...
走进AngularJs(七) 过滤器（filter） - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
AngularJs轻松入门（七）多视图切换
在AngularJs应用中,我们可以將html碎片写在一个单独的文件中,然后在其他页面中將该段碎片加载进来.如果有多个碎片文件,我们还可以在控制器中根据用户的操作动态的加载不同的碎片,从而达到切换视图 ...
健康管理系统第七天（移动端_体检预约(手机号校验、发送验证码之后30秒倒计时效果、生成验证码、向手机发送验证码)）
一.体检预约流程用户可以通过如下操作流程进行体检预约: 1.在移动端首页点击体检预约,页面跳转到套餐列表页面 2.在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面 3.在套餐详情页面点击立即预 ...
angularjs 日期倒计时效果
//页面输出绑定Time值 ng-bind="time | date:'HH:mm:ss'" //定时任务每秒time的值减去1秒 $interval(function() { $ ...

七、angularjs 倒计时

七、angularjs 倒计时相关推荐

最新文章

热门文章