七、angularjs 倒计时

 

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

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);
            }

        }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值