目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如2所示的代码。代码比较简单，思路也比较简单就不多介绍了，在此做个记录，以备以后的项目中也会使用的到。
1：存在导致网页异常的现象，猜测是做的操作太多了，不过这种方式只要网页加载，就能够保证时钟一直走下去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show Time Page</title>
</head>
<body> <a id="time"></a> <script type="text/javascript"> function timeShow()
{
var years,months,dates,hours,minutes,seconds,weeks; var intYears,intMonths,intDates,intHours,intMinutes,intSeconds,intWeeks; var today; var timeString; today = new Date();//获得系统当前时间 intYears = today.getFullYear();//获得年
intMonths = today.getMonth() + 1;//获得月份+1
intDates = today.getDate();//获得天数
intHours = today.getHours();//获得小时
intMinutes = today.getMinutes();//获得分钟
intSeconds = today.getSeconds();//获得秒
intWeeks = today.getDay();//获得星期 years = intYears + '年 '; if(intMonths < 10){
months = '0' + intMonths + '月';
}else{
months = intMonths + '月';
} if(intDates < 10){
dates = '0' + intDates + '日 ';
}else{
dates = intDates + '日 ';
} var weekArray = new Array(7); weekArray[0] = '星期日';
weekArray[1] = '星期一';
weekArray[2] = '星期二';
weekArray[3] = '星期三';
weekArray[4] = '星期四';
weekArray[5] = '星期五';
weekArray[6] = '星期六'; weeks =weekArray[intWeeks] + ' '; if(intHours == 0){
hours = '00:';
}else if(intHours < 10){
hours = '0' + intHours + ':';
}else{
hours = intHours + ":";
} if(intMinutes == 0){
minutes = '00';
}else if(intMinutes < 10){
minutes = '0' + intMinutes ;
}else{
minutes = intMinutes;
} timeString = years + months + dates + weeks + hours + minutes $("#time").text(timeString);
window.setInterval('timeShow()',60000);
} </script>
</body>
</html>
2：改进版，经测试没有引起网页异常的现象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show Time Page</title>
</head>
<body> <a id="time"></a><a id="bjtime"></a> <script type="text/javascript">
/*
进入页面加载的方法
*/
window.onload=function()
{
var date=new Date(),time=date.getTime();
setInterval(function() {set(time);time = Number(time);time += 1000;},1000);
setTodayDate(date);
} /*
设置日期的方法，针对年月日星期的显示
*/
function setTodayDate(today)
{
var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString; intYears = today.getFullYear();//获得年
intMonths = today.getMonth() + 1;//获得月份+1
intDates = today.getDate();//获得天数
intWeeks = today.getDay();//获得星期 years = intYears + '年 '; if(intMonths < 10){
months = '0' + intMonths + '月';
}else{
months = intMonths + '月';
} if(intDates < 10){
dates = '0' + intDates + '日 ';
}else{
dates = intDates + '日 ';
} var weekArray = new Array(7);
weekArray[0] = '星期日';
weekArray[1] = '星期一';
weekArray[2] = '星期二';
weekArray[3] = '星期三';
weekArray[4] = '星期四';
weekArray[5] = '星期五';
weekArray[6] = '星期六';
weeks =weekArray[intWeeks] + ' '; timeString = years + months + dates + weeks; document.getElementById('time').innerHTML=timeString;
} /*
设置北京时间的方法，针对时分秒的显示
*/
function set(time)
{
var beijingTimeZone = 8;
var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;
var now = new Date(time - timeOffset);
document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());
} /*
格式化时间的显示方式
*/
function p(s)
{
return s < 10 ? '0' + s : s;
} </script>
</body>
</html>
3：代码比较简单，直接可以使用，放到文本文件中修改文件格式即可，比如：.html，用浏览器打开便可直接查看代码的效果，如下图所示：