在網頁中經常可以看到各種各樣的動態時間顯示，在網頁中合理地使用時間可以增加網頁的時效感。

顯示當前時間

getHours()、getMinutes()、getSeconds()分別獲得當前小時數、當前分鐘數、當前秒數。

開啟網頁文件，在head標籤中輸入以下程式碼：

<script>
    function showtime(){
        var now_time = new Date(); //建立時間物件的例項
        var hours = now_time.getHours(); //獲得當前小時數
        var minutes = now_time.getMinutes(); //獲得當前分鐘數
 

        var seconds = now_time.getSeconds(); //獲得當前秒數
        var timer = " "+((hours>12)?hours - 12 :hours); //將小時數值賦予變數timer
        timer += ((minutes<10)?":0":":")+minutes; //將分鐘數值賦予變數timer
        timer += ((seconds<10)?":0":":")+seconds; ///將秒數值賦予變數timer
        timer += ((hours>12)?"pm":"am"); //將字元am或pm賦予變數timer
 

        document.clock.show.value=timer; //在名為clock的表單中輸出變數timer的值
        setTimeout("showtime()",1000); //設定每隔一秒鐘自動呼叫一次showtime()函式
    }
  /* setTimeout()方法是由windows物件所提供的，用來實現經過一定時間後
  * 自動進行指定處理。該語句的意思就是1秒後呼叫showtime().setTimeout()
  * 方法中的時間是以毫秒為單位進行計算的，因此1000ms就等於1s。*/

</script>

將游標放在body標記內，輸入程式碼onLoad=”showtime()”。

將游標放在body標籤內，輸入以下程式碼：

<form name="clock" onsubmit="0">
    <input type="text" name="show" size="10" style="background-color: #66afe9;
    border-width: 3px;"/>
</form>

顯示當前日期

首先定義一個星期陣列initArray(),然後利用getYear()、getMonth()、getDate()、getDay()分別獲得當前年份、獲得當前月份、獲得當前日數、獲得當前星期，顯示當前日期的具體操作步驟：
①：在body之中輸入以下程式碼：

<script>
    today=new Date();
    function initArray(){
        this.length=initArray().arguments.length
        for(var i=0;i<this.length;i++)
            this[i+1]=initArray().arguments[i] }
    var d=new initArray(
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六");
    document.write(
            "<font color=red style='font-size:9px;font-family:宋體'>",
            today.getYear(),"年",
            today.getMonth()+1,"月",
            today.getData(),"日",
            d[today.getDay()+1],
            "</font>");
</script>
<!--在顯示月份的時候，要將所得的月份加1，因為月份的值是從0到11.-->
<!--利用getDay()方法獲得的值中，0代表星期天，而所得值中沒有7.-->

顯示網頁停留時間

首先用fom定義一個表單，然後在表單內使用input標記定義一個文字框，然後定義一個function update()函式計算停留時間，最後利用doucument.forms.input1.value=hour+“時”+min+“分”+sec+“秒”在文字框中顯示停留時間。
①：在Body標籤內輸入以下程式碼：

<!--定義表單名稱forms-->
<form name="forms">
<div align="left">
    <!-- 定義文字框名稱input1-->
    <input type="text" name="input1" size="10"/>
    <script>
        <!--
        var sec= 0,min= 0,hou= 0;
        flag=0;
        idt=window.setTimeout("update();",1000);//每隔1s重新整理一次
        function update()  //定義函式計算停留時間
        {
            sec++;
            if(sec==60){
                sec=0;
                min+=1;
            }
            if(min==60){
                min=0;
                hou+=1;
            }
            //如果停留時間少於1分鐘，彈出提示資訊
            if((min>0)&&(flag==0))
            {
                window.alert("歡迎光臨！");
                flag=1;
            }
            //顯示停留時間資訊
            document.forms.input1.value=hou+"時"+min+"分"+sec+"秒";
            idt=window.setTimeout("update();",1000);
        }// -->
    </script>
</div>
</form>

製作倒計時特效

倒計時特效可以讓使用者明確知道某個日期剩餘的時間。
①：在body標籤內輸入以下程式碼：

<script>
    var timedate = new Date("October 1,2018"); //設定倒計時時間為2018年10月1日
    var times="指定日期"; //設定time變數
    var now=new Date(); //獲得當前時間
    var date=timedate.getTime() - now.getTime(); //獲得剩餘時間
    var time = Math.floor(date/(1000*60*60*24)); //將剩餘時間轉化為天數
    if(time>=0);
    //顯示倒計時時間資訊
    document.write("現在離2018年"+times+"還有：" +
            "<font color=red><b>"+time+"</b></font>天");
</script>
<!--利用var date= timedate.getTime()-now.getTime()可以獲得剩餘時間，由於時間是以毫秒為單位計算的，因此換算率如下：
    1天=24小時，1小時=60分鐘，1分鐘=60秒，1秒=1000毫秒-->
<!--利用var time=Math.floor(date/(1000*60*60*24)) 將剩餘時間轉換為剩餘天數。-->