简单的网页数字时钟

最新推荐文章于 2024-06-26 19:39:06 发布

dianbiaosao3462

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量549

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hipo/archive/2012/03/02/2377849.html

版权

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

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

简单一个Html页面

 
       1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
       2: <html xmlns="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:   <title>简单时钟</title>  
       7: </head>  
       8: <body>  
       9: <div id="clock">  
      10:     <div class="year">  
      11:         <div id="Year" class="num">0000</div>  
      12:         <div id="year">年</div>  
      13:         <div id="Month" class="num">00</div>  
      14:         <div id="month">月</div>  
      15:         <div id="Date" class="num">00</div>  
      16:         <div id="date">日</div>  
      17:     </div>  
      18:     <div class="time">  
      19:         <div id="Hour" class="num">00</div>  
      20:         <div class="sign">:</div>  
      21:         <div id="Minute" class="num">00</div>  
      22:         <div class="sign">:</div>  
      23:         <div id="Second" class="num">00</div>  
      24:         <div id="week">星期</div>  
      25:         <div id="Week" class="num">一</div>  
      26:     </div>  
      27: </div>  
      28: </body>  
      29: </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: }; 
function checkSwitch() 
{ 
    var year=document.getElementById('Year'); 
    var month=document.getElementById('Month'); 
    var date=document.getElementById('Date'); 
    var hour=document.getElementById('Hour'); 
    var minute=document.getElementById('Minute'); 
    var second=document.getElementById('Second'); 
    var week=document.getElementById('Week'); 
     
    aNow=getTimeArray(); 
     
    year.innerHTML=aNow[0]; 
    month.innerHTML=aNow[1]; 
    date.innerHTML=aNow[2]; 
    hour.innerHTML=aNow[3]; 
    if(aNow[4] < 10){ 
        minute.innerHTML='0'+aNow[4]; 
    } 
    else{ 
        minute.innerHTML=aNow[4]; 
        } 
    if(aNow[5] < 10){ 
        second.innerHTML='0'+aNow[5]; 
    } 
    else{ 
        second.innerHTML=aNow[5]; 
    } 
    week.innerHTML=aWeekName[aNow[6]]; 
     
} 
   
function toDouble(iNum) 
{ 
    if(iNum<10) 
    { 
        return ' 0'+iNum; 
    } 
    else 
    { 
        return ' '+iNum; 
    } 
} 
   
function getTimeArray() 
{ 
    var oDate=new Date(); 
    var aNumber=[]; 
     
    var iYear=oDate.getYear(); 
    var iMonth=oDate.getMonth(); 
    var iDay=oDate.getDate(); 
    var iHour=oDate.getHours(); 
    var iMin=oDate.getMinutes(); 
    var iSec=oDate.getSeconds(); 
    var iWeek=oDate.getDay(); 
     
    if(iYear<1900) 
    { 
        iYear+=1900; 
    } 
     
    var str=(iYear)+toDouble(iMonth+1)+toDouble(iDay)+toDouble(iHour)+toDouble(iMin)+toDouble(iSec)+' '+iWeek; 
    var aChar=str.split(' '); 
     
    for(i=0;i<aChar.length;i++) 
    { 
        aNumber[i]=parseInt(aChar[i]); 
    } 
    return aNumber; 
} 
   