Of Stack

Implementation method of special date hint function

  • 2021-06-29 06:16:10
  • OfStack

1. Overview

When designing and developing a website, you can include the function of displaying system dates in the page. If you can display the system dates at the same time as the corresponding festivals, you can help site visitors.

2. Technical Essentials

Implementing the function of special date hints can be roughly divided into the following steps:

(1) Create an instance of the Date () object and use the getYear (), getMonth (), getDate (), getDay () methods to obtain data information about the year, month, day and week in the current system time.

(2) Monthly information obtained by the getMonth() method is counted from 0, so the corresponding month data should be automatically added to 1.

(3) The week information obtained by the getDay() method is numeric data, which needs to be converted into corresponding text information using the data object Array.

(4) The name of the festival to be displayed according to the month and day obtained.

(5) To combine all the data and export it to the browser, you need to use < div > Tagged innerHTML method implementation.

3. Specific implementation code

(1) Use JavaScript to write the function datePrompt() for displaying the special date < div > Mark.The code for the custom function that prompts for special dates is as follows: 


<SCRIPT language="javascript">
<!--
function datePrompt(){
calendar = new Date(); // Get Date object 
day = calendar.getDay();
month = calendar.getMonth()+1; // Get Month 
date = calendar.getDate(); // Get Days 
year = calendar.getFullYear(); // Obtain 4 Year of the digit 
var dayname = new Array (" Sunday ", " week 1", " week 2", " week 3", " week 4", " week 5", " week 6");
var time=year +" year "+month+" month "+date + " day  "+dayname[day]+" "; // Combination Date 
var holiday="";
if ((month == 1) && (date == 1)) holiday="<font color=red> New Year's Day ";
if ((month == 5) && (date == 1)) holiday="<font color=red> International Labor Day ";
if ((month == 5) && (date == 4)) holiday="<font color=red> Youth Day ";
if ((month == 6) && (date == 1)) holiday="<font color=red> International Children's Day ";
if ((month == 7) && (date == 1)) holiday="<font color=red> Party building anniversary ";
if ((month == 8) && (date == 1)) holiday="<font color=red> Army Day ";
if ((month == 10) && (date == 1)) holiday="<font color=red> National Day ";
if ((month == 12) && (date == 25)) holiday="<font color=red> Christmas ";
time=time+holiday;
clock.innerHTML=time; // Display system dates with special date prompts 
}
//-->
</SCRIPT>

(2) On pages that require real-time display of special dates and times < body > In the marked onLoad event, call the datePrompt() function you just wrote and add it in the appropriate place on the page < div > Tag, call the custom function with the following code, the key code is as follows: 


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