JavaScript实现网页实时时钟显示

JavaScript实时时钟实现原理

首先，使用JavaScript编写一个名为clockon()的函数来实时显示系统时间。该函数接收一个参数bgclock，用于指定显示转换后时间的<div>元素ID，函数无返回值。在网站建设中，可将此函数保存至独立的JS文件以便复用。

<script>
function clockon(bgclock)
{
var now = new Date();
var year = now.getYear();
var month = now.getMonth();
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
var minu = now.getMinutes();
var sec = now.getSeconds();
var week;
month = month+1;
if(month<10)month="0"+month;
if(date<10)date="0"+date;
if(hour<10)hour="0"+hour;
if(minu<10)minu="0"+minu;
if(sec<10)sec="0"+sec;
var arr_week = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
week = arr_week[day];
var time = "";
time = year+"年"+month+"月"+date+"日"+week+""+hour+";"+minu+";"+sec;
if(document.all)
    {
bgclock.innerHTML="["+time+"]"
    }
var timer = setTimeout("clockon(bgclock)",200);
}
</script>

页面调用与HTML结构配置

其次，在HTML页面的<body>标签的onload事件中调用该函数，并在需要显示时间的区域放置一个id为bgclock的div元素。

<body onLoad="clockon(bgclock)">
<div id="bgclock" class="word_Green"></div>
</body>