七、angularjs 倒計時

標籤：ndt   foreach   .com   cti   and   迴圈   ges   img   splay   

 

使用定時器時離開頁面需要清除定時器，清除的方法有兩種分別針對頁面有緩衝和沒有緩衝

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 倒計時