目前有個小項目，在首頁頭部導航欄里需要一個電子時鍾的效果，於是我就采用如下代碼實現了一個電子時鍾的效果。不過不完美，第一種方式容易導致網頁莫名其妙的異常，后來覺得可能是做的操作太多了，然后又編寫了如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，用瀏覽器打開便可直接查看代碼的效果，如下圖所示：
