如何在网页中动态的显示日期时间

本文主要说明的是如何在网页中动态的显示日期时间,我们这儿使用js来实现,很简单,一看就会。

为动态显示系统时间的javascript代码及页面代码:

<html>  
    <head>  
        <title>网页中动态的显示系统日期时间</title>  
        <script language="JavaScript">  
            function startTime()     
            {     
                var today=new Date();//定义日期对象     
                var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年      
                var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年      
                var dd = today.getDate();//通过日期对象的getDate()方法返回年       
                var hh=today.getHours();//通过日期对象的getHours方法返回小时     
                var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟     
                var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒     
                // 如果分钟或小时的值小于10,则在其值前加0,比如如果时间是下午3点20分9秒的话,则显示15:20:09     
                MM=checkTime(MM);  
                dd=checkTime(dd);  
                mm=checkTime(mm);     
                ss=checkTime(ss);      
                var day; //用于保存星期(getDay()方法得到星期编号)  
                if(today.getDay()==0)   day   =   "星期日 "   
                if(today.getDay()==1)   day   =   "星期一 "   
                if(today.getDay()==2)   day   =   "星期二 "   
                if(today.getDay()==3)   day   =   "星期三 "   
                if(today.getDay()==4)   day   =   "星期四 "   
                if(today.getDay()==5)   day   =   "星期五 "   
                if(today.getDay()==6)   day   =   "星期六 "   
                document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+"   " + day;     
                setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法   
            }     
              
            function checkTime(i)     
            {     
                if (i<10){  
                    i="0" + i;  
                }     
                  return i;  
            }    
        </script>  
    </head>  
    <body onload="startTime()">  
        当前时间:<font color="#33FFFF"><span id="nowDateTimeSpan"></span></font>      
    </body>  
</html> 

 以上完成了动态显示时间,线面的代码完成”倒计时“功能。

  <p id="p">距离2013/01/01年还剩000天0000时0000分0000秒</p>  
<script type="text/javascript">  
    function setTimer(){  
        var targetDate = document.getElementById("target").value;  
        var taget = new Date(targetDate);  
        var now = new Date();  
        var plus = taget.getTime() - now.getTime();<!--得到的是毫秒-->  
        var day = parseInt(plus/1000/60/60/24);  
        var hour = parseInt(plus/1000/60/60) - day * 24;  
        var minute = parseInt(plus/1000/60) - parseInt(plus/1000/60/60)*60;  
        var second = parseInt(plus/1000) - parseInt(plus/1000/60)*60;  
        document.getElementById("p").innerHTML = "距离"+targetDate+"还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";  
    }   
  setInterval(setTimer,1000);  
</script>  

 

posted @ 2015-04-19 22:37  浮夸浮华  阅读(1747)  评论(0编辑  收藏  举报