技術文章 » javascript怎麼動態顯示時間

javascript怎麼動態顯示時間

2021-09-16 19:00:48

javascript顯示時間的方法：1、使用「new Date()」定義日期物件；2、使用日期物件的getFullYear()、getMonth()等方法獲取年月日時分秒值並輸出；3、用setTimeout()方法一秒鐘重新整理一次時間值即可。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

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()" style="background-color: #000000;color: white;">
        當前時間：<font color="#33FFFF"><span id="nowDateTimeSpan"></span></font> 
    </body>
</html>

效果圖：

1.gif

Date物件的方法

Date 物件能夠使你獲得相對於國際標準時間（格林威治標準時間，現在被稱為 UTC-Universal Coordinated Time）或者是 Flash 播放器正執行的作業系統的時間和日期。要使用Date物件的方法，你就必須先建立一個Date物件的實體（Instance）。

Date 物件必須使用 Flash 5 或以後版本的播放器。

Date 物件的方法並不是靜態的，但是在使用時卻可以應用於所指定的單獨實體。

Date 物件的方法簡介：

getDate ｜ 根據本地時間獲取當前日期(本月的幾號)

getDay ｜ 根據本地時間獲取今天是星期幾(0-Sunday,1-Monday…)

getFullYear ｜ 根據本地時間獲取當前年份(四位數位)

getHours ｜ 根據本地時間獲取當前小時數(24小時制,0-23)

getMilliseconds ｜ 根據本地時間獲取當前毫秒數

getMinutes ｜ 根據本地時間獲取當前分鐘數

getMonth ｜ 根據本地時間獲取當前月份(注意從0開始:0-Jan,1-Feb…)

getSeconds ｜ 根據本地時間獲取當前秒數

getTime ｜ 獲取UTC格式的從1970.1.1 0:00以來的毫秒數

getTimezoneOffset ｜ 獲取當前時間和UTC格式的偏移值(以分鐘為單位)

getUTCDate ｜ 獲取UTC格式的當前日期(本月的幾號)

getUTCDay ｜ 獲取UTC格式的今天是星期幾(0-Sunday,1-Monday…)

getUTCFullYear ｜ 獲取UTC格式的當前年份(四位數位)

getUTCHours ｜ 獲取UTC格式的當前小時數(24小時制,0-23)

getUTCMilliseconds ｜ 獲取UTC格式的當前毫秒數

getUTCMinutes ｜ 獲取UTC格式的當前分鐘數

getUTCMonth ｜ 獲取UTC格式的當前月份(注意從0開始:0-Jan,1-Feb…)

getUTCSeconds ｜ 獲取UTC格式的當前秒數

getYear ｜ 根據本地時間獲取當前縮寫年份(當前年份減去1900)

setDate ｜ 設定當前日期(本月的幾號)

setFullYear ｜ 設定當前年份(四位數位)

setHours ｜ 設定當前小時數(24小時制,0-23)

setMilliseconds ｜ 設定當前毫秒數

setMinutes ｜ 設定當前分鐘數

setMonth ｜ 設定當前月份(注意從0開始:0-Jan,1-Feb…)

setSeconds ｜ 設定當前秒數

setTime ｜ 設定UTC格式的從1970.1.1 0:00以來的毫秒數

setUTCDate ｜ 設定UTC格式的當前日期(本月的幾號)

setUTCFullYear ｜ 設定UTC格式的當前年份(四位數位)

setUTCHours ｜ 設定UTC格式的當前小時數(24小時制,0-23)

setUTCMilliseconds ｜ 設定UTC格式的當前毫秒數

setUTCMinutes ｜ 設定UTC格式的當前分鐘數

setUTCMonth ｜ 設定UTC格式的當前月份(注意從0開始:0-Jan,1-Feb…)

setUTCSeconds ｜ 設定UTC格式的當前秒數

setYear ｜ 設定當前縮寫年份(當前年份減去1900)

toString ｜ 將日期時間值轉換成」日期/時間」形式的字串值

Date.UTC ｜ 返回指定的UTC格式日期時間的固定時間值

【推薦學習：】

以上就是javascript怎麼動態顯示時間的詳細內容，更多請關注TW511.COM其它相關文章！