目前有个小项目，在首页头部导航栏里需要一个电子时钟的效果，于是我就采用如下代码实现了一个电子时钟的效果。不过不完美，第一种方式容易导致网页莫名其妙的异常，后来觉得可能是做的操作太多了，然后又编写了如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，用浏览器打开便可直接查看代码的效果，如下图所示：
