Change page content with time

隨時間變動的網頁內容

如何早晚有別: 在一些即時新聞網站中，為了在網頁中反映一天中不同時段的區別，會以不同的顯示內容和格式，來提醒瀏覽者時間的差異。這用 Server 端進行處理是小事一樁，但絕大多數的網頁作者恐怕多無 Server 端 Script 的執行權限，所以能利用的只有 HTML 碼和 Client 端的 Script 敘述了。所幸使用 DHTML 在瀏覽器端 (Client) 執行時間判斷顯示的效果還不錯，所以本範例就來試一下如何在 Client 端如何用 DHTML 來呈現一天中隨時間而呈現不同面貌的網頁。

整個網頁的佈置

如果我們要求的是整個網頁風貌的改變，而不只是改幾個字或換幾張圖片，那麼使用 Style Sheet 配合 CLASS 名稱選擇，是非常簡化且有利於 Script 操作的，因此在網頁內文開始之前，我們先把 Style Sheet 準備好如下：

<HTML>
<HEAD>
    <STYLE TYPE="text/css">
    <!--
        /* 利用 CSS Style 設定白天與黑夜不同的色調 */
        .day {background-color:#00ffff;color:black;}
        .night {background-color:darkblue;color:white;}
        // -->
    </STYLE>
</HEAD>

這段 Code 十分簡單，就是白天用淺藍底黑字，夜晚用深藍底白字。

取得時間物件

要依每天不同時段顯示不同風貌的網頁，當然要有個能判斷時間的東西來做為 Script 執行的依據啊!這也很簡單，在 JavaScript 裏，用 var 變數名稱=new Date(); 的敘述，就在被宣告的變數成為時間物件變數的同時，也將宣告當下的系統日期時間記錄到這個時間物件變數裏去了。既然有了這個時間物件，我們就可以在以後的 Script 的敘述中，利用時間物件做各種條件判斷。例如本範例時間物件宣告如下：

var objDate=new Date();

如何用時間物件判斷不同時段

單知道個宣告時間變數物件，並無法發揮時間物件的功能，在 JavaScript 中不管是年,月,日,時,分,秒，都有它對應的取用方法。譬如本範例我們是用 DateObject.getHours()方法來判斷目前是屬於白天還是黑夜：

/* 如果目前 24 小時制時間大於 6 點，小於 18 點，則歸類為白天。 */
if (objDate.getHours()>=6 && objDate.getHours()<=18)
{
    /* ...... 白天的網頁設定及輸出 ...... */
}
/* 若小於 6 或大於 18 則是黑夜 */
else
{
    /* ...... 黑夜的網頁設定及輸出 ...... */
}

條件式輸出網頁內容及格式

在 DHTML 中使用 Script 敘述改變網頁內容及格式，可分為兩大類：

載入同時依條件式輸出網頁內容，操作的是 document 物件的 write() 方法。
載入完成後依瀏覽者操作而改變網頁內容，所有網頁物件都有可能被操作，要使用那種方法要依需要改變那種物件而定。

在本範例中我們採用第一種方法如下：

if (objDate.getHours()>=6 && objDate.getHours()<=18)
{
    /* 設定網頁格式的 Style 為 day，淺藍底黑字。 */
    document.write('<BODY CLASS="day">');
    /* 白天使用太陽圖片 */
    document.write('<IMG SRC="sun.gif">');
}
else
{
    /* 設定網頁格式的 Style 為 night，深藍底白字。 */
    document.write('<BODY CLASS="night">');
    /* 夜晚使用月亮圖片 */
    document.write('<IMG SRC="moon.gif">');
}

/* 輸出時間字串顯示在網頁上 */
document.write('<BR><BR>現在時間是：<B>');
if (objDate.getHours()/12>1)
{document.write('下午 ');}
else
{document.write('上午 ');}
document.write((objDate.getHours() % 12)+"點");
document.write(objDate.getMinutes()+"分");
document.write(objDate.getSeconds()+"秒</B>");

開啟範例網頁: 以上就是本範例大概的內容，只把一天切成白天黑夜兩段，做不同格式顯示。現在在下面表單欄位中，是你電腦的系統時間，你可以更改它們，然後再按 [開啟範例網頁]按鈕，來測試不同時間下，網頁轉變的效果。
設定範例網頁時間：時分秒

回前頁