zoukankan      html  css  js  c++  java
  • 七、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);
                }
    
            }
  • 相关阅读:
    系统的访问
    tomcat 和 数据库的连接
    实体类编写规则
    webmagic 爬虫
    docker安装官方Redis镜像并启用密码认证
    解决Loading class `com.mysql.jdbc.Driver'. This is deprecated. The new driver class is `com.mysql.cj.jdbc.Driver'. 问题
    Springboot配置druid报错Failed to bind properties under 'spring.datasource' to javax.sql.DataSource
    阿里云centos7.6搭建SVN远程仓库和Git远程仓库
    java 三大特性封装继承多态
    使用easyui tab需要注意的问题
  • 原文地址:https://www.cnblogs.com/gunelark/p/7290616.html
Copyright © 2011-2022 走看看