1. Overview
When designing and developing a website, you can add the function of displaying the system date to the page. If the corresponding festival can be displayed while displaying the system date, you can provide help to website visitors.
2. Technical points
The function of implementing the special date prompt can be roughly divided into the following steps:
(1) Create an instance of the Date() object, use getYear(), getMonth(), getDate(), and getDay() methods to obtain data information about year, month, day, and week in the current system time.
(2) The month information obtained using the getMonth() method is counted from 0, so the corresponding data of the month must be automatically added to 1.
(3) The weekly information obtained using the getDay() method is numerical data, and it is necessary to use the data object Array to convert it into the corresponding text information.
(4) The festival name displayed is judged based on the month and day obtained.
(5) Combine and output all data to the browser, and use the innerHTML method marked with the <div> tag to implement it.
3. Specific implementation code
(1) Use JavaScript to write a special date prompt function datePrompt() to specify the <div> tag that displays the special date. The code for a custom function prompting for a special date is as follows:
<SCRIPT language="javascript"><!--function datePrompt(){calendar = new Date(); //Get the date object day = calendar.getDay(); month = calendar.getMonth()+1; //Get month date = calendar.getDate(); //Get day year = calendar.getFullYear(); //Get 4-bit year var dayname = new Array ("Sunday", "Monday", "Tuesday", "Thursday", "Friday", "Saturday"); 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>Centering Party 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; //Show the system date and give special date prompts}//--></SCRIPT>(2) In the onLoad event marked with the <body> in the page that needs to display the special date and time in real time, call the datePrompt() function just written, and add the <div> tag at the appropriate location in the page. The following code is used to call the custom function. The key code is as follows:
<body onLoad="datePrompt()"><td align="center" background="images/1.JPG"><div id="clock"></div></td>
The above is the relevant knowledge about the implementation method of the special date prompt function introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!