JavaScript实现浏览器状态栏实时显示时间
作者:像素漫游时间:2026-10-29 16:11:00浏览:244
本文提供了一段JavaScript代码,用于在浏览器窗口左下角状态栏实时显示当前时间。代码包含启动与停止计时器的逻辑,通过setInterval定时刷新时间字符串。该示例旨在展示如何操作window.status属性,适用于早期的个人主页或特定兼容性测试场景,如IE浏览器。
状态栏时间显示实现原理
本文介绍了一种使用JavaScript在浏览器状态栏显示当前时间的实现方式,供读者参考学习。
在早期的个人网页开发中,为了增加页面的个性化效果,常会在状态栏添加问候语或跑马灯文字。本代码实现了在状态栏实时显示时间的功能。经测试,该效果在IE浏览器中表现完美,Firefox浏览器未进行详细测试。
运行效果如下图所示:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-status-bar-show-time-demo/
具体实现代码如下:
完整代码示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>状态栏时间显示</TITLE>
</HEAD>
<script language="JavaScript">
var timerID = null;
var timerRunning = false;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = " " + ((hours >12) ? hours -12 :hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " 下午" : " 上午"
window.status = timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
</script>
<body bgcolor="#336699" topmargin="0" leftmargin="0" onLoad="startclock()">请看左下角!状态栏有时间显示!</BODY>
</HTML>
希望本文所述的JavaScript程序设计内容能对大家有所帮助。
作者最新文章
D3.js 处理大规模数据点的性能优化策略
2026-11-05 15:37:25
JS实现网页摄像头实时扫码:结合getUserMedia与jsQR教程
2026-11-05 15:27:28
D3.js v5 迁移到 v7 的 API 变更与注意事项
2026-11-05 11:57:17
使用 animate.js 实现多元素协同的序列动画
2026-11-04 22:27:53
JS拖拽排序时怎么添加平滑动画效果?FLIP技术实战
2026-11-04 10:12:22
