正文
七、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);
} }
