DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 特殊日期提示功能的實現方法
特殊日期提示功能的實現方法
編輯:關於JavaScript     

1.概述

在設計開發網站時,可以在頁面中加入顯示系統日期的功能,如果在顯示系統日期的同時能夠顯示相應的節日,可以給網站浏覽者提供幫助。

2.技術要點

實現特殊日期提示的功能,大致可分為以下幾個步驟:

(1)創建Date()對象的實例,使用getYear()、getMonth(),getDate()、getDay()方法獲取當前系統時間中有關年、月、日、星期的數據信息。

(2)使用getMonth()方法獲取的月信息是從0開始計數的,所以要將月份對應的數據自動加1。

(3)使用getDay()方法獲取的星期信息是數值型數據,需要使用數據對象Array將其轉換為對應的文字信息。

(4)根據獲取的月份和日判斷顯示的節日名稱。

(5)將所有的數據組合並輸出到浏覽器上,需要使用<div>標記的innerHTML方法實現。

3.具體實現代碼

(1)應用JavaScript編寫特殊日期提示的函數datePrompt(),用於指定顯示該特殊日期的<div>標記。提示特殊日期的自定義函數的代碼如下:

<SCRIPT language="javascript">
<!--
function datePrompt(){
calendar = new Date(); //獲取日期對象
day = calendar.getDay();
month = calendar.getMonth()+1; //獲取月
date = calendar.getDate(); //獲取日
year = calendar.getFullYear(); //獲取4位的年
var dayname = new Array ("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
var time=year +"年"+month+"月"+date + "日 "+dayname[day]+" "; //組合日期
var holiday="";
if ((month == 1) && (date == 1)) holiday="<font color=red>元旦";
if ((month == 5) && (date == 1)) holiday="<font color=red>國際勞動節";
if ((month == 5) && (date == 4)) holiday="<font color=red>青年節";
if ((month == 6) && (date == 1)) holiday="<font color=red>國際兒童節";
if ((month == 7) && (date == 1)) holiday="<font color=red>建黨紀念日";
if ((month == 8) && (date == 1)) holiday="<font color=red>建軍節";
if ((month == 10) && (date == 1)) holiday="<font color=red>國慶節";
if ((month == 12) && (date == 25)) holiday="<font color=red>聖誕節";
time=time+holiday;
clock.innerHTML=time; //顯示系統日期,並進行特殊日期提示
}
//-->
</SCRIPT> 

(2)在需要實時顯示特殊日期時間的頁面中<body>標記的onLoad事件中,調用剛剛編寫的datePrompt()函數,並在該頁面中適當的位置加入<div>標記,通過以下代碼來調用自定義函數,關鍵代碼如下:

<body onLoad="datePrompt()">
<td width="219" height="27" align="center" background="images/1.JPG"><div id="clock">
</div></td>

以上所述是小編給大家介紹的特殊日期提示功能的實現方法的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved