七angularjs 倒计时

Posted 2020-10-01 gunelark

 

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

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

        }