JavaScript实现动态显示登录时间与在线时长的方法
作者:木棉时间:2026-10-29 22:25:30浏览:134
本文介绍如何使用JavaScript动态获取用户登录时间并实时计算在线时长。通过创建Date对象记录初始时间,利用setTimeout定时刷新显示当前登录时间与累计上网时长的HTML元素,实现登录状态的可视化监控。
JavaScript动态获取登录时间与在线时长实现
本文分享了一段JavaScript代码,用于动态获取用户的登录时间并计算在线时长,供读者参考学习。
具体运行效果如下图所示:

核心实现逻辑如下所示:
<html>
<head>
<title>online</title>
<script language=javaScript>
///这里是获得登录时候的时间,用来和动态的时间做差来求时长
var s = new Date();
function clockon() {
var thistime = new Date();
//时间差
diff = new Date();
diff.setTime(Math.abs(thistime.getTime() - s.getTime()));
timediff = diff.getTime();
hos = Math.floor(timediff / (1000 * 60 * 60));
mins = Math.floor(timediff / (1000 * 60));
secs = Math.floor(timediff / 1000);
//end
var hours = thistime.getHours();
var minutes = thistime.getMinutes();
var seconds = thistime.getSeconds();
if (eval(hours) < 10) {
hours = "0" + hours;
}
if (eval(minutes) < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
thistime = hours + ":" + minutes + ":" + seconds;
bgclockshade.innerHTML = thistime//这里动态的嵌入当前的时间
//如果不取余的话,秒数是一直上升的,所以在达到一个60的时候就取余就可以解决这个问题了
if (secs > 59) {
secs = secs % 60;
}
if (mins > 59) {
mins = mins % 60;
}
if (eval(secs) < 10) {
secs = "0" + secs;
}
if (eval(mins) < 10) {
mins = "0" + mins;
}
if (eval(hos) < 10) {
hos = "0" + hos;
}
jishi.innerHTML = hos + ":" + mins + ":" + secs;
var timer = setTimeout("clockon()", 200);
}
</script>
</head>
<body onload="clockon();">
登录时间:
<div id="bgclockshade"></div>
上网时长:
<div id="jishi"></div>
</body>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助。
作者最新文章
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
