2012年3月2日星期五

简单的网页数字时钟

先来一个最终实现效果图：clock

主要实现思路：利用JavaScript内置对象Date来获取当前系统时间，通过DOM方法setInterval(code,time)方法来实现实时的刷新。

  1. 简单一个Html页面 
   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2:  <html ="http://www.w3.org/1999/xhtml">
   3:  <head>
   4:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5:  <link rel="stylesheet" href="css/clock.css" />
   6:  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
   7:  <script type="text/javascript" src="js/clock.js"></script>
   8:  <script type="text/javascript">
   9:       $(document).ready(function(){
  10:          setclock();
  11:      });
  12:  </script>
  13:  <title>简单时钟</title>
  14:  </head>
  15:  <body>
  16:         <div id="clock">
  17:                  <div class="year">
  18:                       <div id="Year" class="num">0000</div>
  19:                          <div id="year">年</div>
  20:                          <div id="Month" class="num">00</div>
  21:                          <div id="month">月</div>
  22:                          <div id="Date" class="num">00</div>
  23:                          <div id="date">日</div>
  24:                      </div>
  25:                      <div class="time">
  26:                          <div id="Hour" class="num">00</div>
  27:                          <div class="sign">:</div>
  28:                          <div id="Minute" class="num">00</div>
  29:                          <div class="sign">:</div>
  30:                          <div id="Second" class="num">00</div>
  31:                          <div id="week">星期</div>
  32:                          <div id="Week" class="num">一</div>
  33:                      </div>
  34:             </div> 
  35:  </body>
  36:  </html>

2. clock.js的实现

   1:  var timer=null;
   2:  var aNow=null;
   3:  var g_oImgWeek=null;
   4:  var aWeekName=["日", "一", "二", "三", "四", "五", "六"];
   5:   
   6:  function setclock()
   7:  {
   8:      setInterval(checkSwitch, 1000);
   9:  };
  10:  function checkSwitch()
  11:  {
  12:      var year=document.getElementById('Year');
  13:      var month=document.getElementById('Month');
  14:      var date=document.getElementById('Date');
  15:      var hour=document.getElementById('Hour');
  16:      var minute=document.getElementById('Minute');
  17:      var second=document.getElementById('Second');
  18:      var week=document.getElementById('Week');
  19:      
  20:      aNow=getTimeArray();   
  21:      year.innerHTML=aNow[0];
  22:      month.innerHTML=aNow[1];
  23:      date.innerHTML=aNow[2];
  24:      hour.innerHTML=aNow[3];
  25:      if(aNow[4] < 10){
  26:          minute.innerHTML='0'+aNow[4];
  27:      }
  28:      else{
  29:          minute.innerHTML=aNow[4];
  30:          }
  31:      if(aNow[5] < 10){
  32:          second.innerHTML='0'+aNow[5];
  33:      }
  34:      else{
  35:          second.innerHTML=aNow[5];
  36:      }
  37:      week.innerHTML=aWeekName[aNow[6]];
  38:      
  39:  }
  40:  function toDouble(iNum)
  41:  {
  42:      if(iNum<10)
  43:      {
  44:          return ' 0'+iNum;
  45:      }
  46:      else
  47:      {
  48:          return ' '+iNum;
  49:      }
  50:  }
  51:  function getTimeArray()
  52:  {
  53:      var oDate=new Date();
  54:      var aNumber=[];
  55:      
  56:      var iYear=oDate.getYear();
  57:      var iMonth=oDate.getMonth();
  58:      var iDay=oDate.getDate();
  59:      var iHour=oDate.getHours();
  60:      var iMin=oDate.getMinutes();
  61:      var iSec=oDate.getSeconds();
  62:      var iWeek=oDate.getDay();    if(iYear<1900)
  63:      {
  64:          iYear+=1900;
  65:      }
  66:      var str=(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+' '+iWeek;
  67:      var aChar=str.split(' ');
  68:      
  69:      for(i=0;i<aChar.length;i++)
  70:      {
  71:          aNumber[i]=parseInt(aChar[i]);
  72:      }
  73:       return aNumber;
  74:  }

简单的网页数字时钟

TAG:
发帖者 时间：