JS实现电子时钟

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

posted on 2016-02-29 22:10 godtrue 阅读(8191) 评论(0) 编辑收藏举报