在页面上显示登陆时间、登陆时长

(作者：杨东升，撰写时间：2019年04月05日)
当我们在做网页时，我们可以在页面上加上登陆时间、登陆时长，使页面更加丰富，给用户更好的体验，如图所示：
在这里插入图片描述

我们首先定义一个全局变量strServerTime，接收到登陆的时间，因为接收到的登陆时间是字符串类型，所以要用个引号把它括起来，这样就可以得到登陆时间了
在这里插入图片描述

登陆时长：
首先我们判断strServerTime不为空，然后创建日期对象

var serverTime = new Date(strServerTime)，获取到登陆的时间
用定时器setInterval调用方法，并一秒执行一次，strLoginTime不断设置#LoginTime的文本值，并将拼接好的时间放到span标签，就可以在页面显示了。
在这里插入图片描述

代码部分：
if (strServerTime != ‘’) {

            var serverTime = new Date(strServerTime);
            
            window.setInterval(function () {
            
                var dateNow = new Date();
                
                var date3 = parseInt(dateNow - serverTime);

                var days = Math.floor(date3 / (24 * 60 * 60 * 1000));
                
                var leave1 = date3 % (24 * 60 * 60 * 1000);   
                var hours = Math.floor(leave1 / (60 * 60 * 1000));
                
                var leave2 = leave1 % (60 * 60 * 1000);        
                var minutes = Math.floor(leave2 / (60 * 1000));
                
                var leave3 = leave2 % (60 * 1000); 
                var seconds = Math.floor(leave3 / 1000);

                var strLoginTime = "";
                if (days > 0) {
                    strLoginTime += days + "天 ";
                }
                if (hours > 0) {
                    strLoginTime += hours + "小时 "
                }
                if (minutes > 0) {
                    strLoginTime += minutes + " 分钟 ";
                }
                strLoginTime += seconds + " 秒";
                //console.log(strLoginTime);

                $("#LoginTime").text(strLoginTime);
            }, 1000);
        }

var dateNow = new Date();获取到当前的时间

var date3 = parseInt(dateNow - serverTime);用当前的时间减去登陆的时间，得到时间差，
得到的时间差是毫秒单位， parseInt取整数。

var days = Math.floor(date3 / (24 * 60 * 60 * 1000)); Math.floor对一个数进行下舍入，
用时间差处以一天的毫秒数计算出相差天数

var leave1 = date3 % (24 * 60 * 60 * 1000);取余数，得到天数后剩余的毫秒数
下面的时、分、秒同理，分别得到小时数、小时数后剩余的毫秒数、分钟数、分钟数后剩余的毫秒数、秒数

判断得到的天、时、分、秒是否为空，不为空就把它们拼接起来，就可以得到登陆时长了

在页面上显示登陆时间、登陆时长

猜你喜欢