Effects: Display a drag calendar in a Web page

drag | effects | pages | Show the JavaScript script provided in this article, in conjunction with the Dreamweaver layer and behavior, you can display a beautifully dragged monthly calendar on the page.

The specific production steps are as follows:

1. Start Dreamweaver MX, create a new HTML document, switch to Code view, and write JavaScript scripts.

(1) Insert the following JavaScript script in the < head>...

< SCRIPT language= "javascript" type= "Text/javascript" >
Define a month calendar function
function Calendar () {
var today = new Date (); Create a Date Object
Year = Today.getyear (); Read year
ThisDay = Today.getdate (); Read current day

Create an array of days per month
var monthdays = new Array (31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
If it is a leap year, the number of days in February is 29 days
If ((year% 4 = 0) && (year% 100!= 0)) | | (Year% 400 = 0)) MONTHDAYS[1] = 29;
Daysofcurrentmonth = Monthdays[today.getmonth ()]; Read the number of days of the month from an array of days per month
FirstDay = today;//Copy Date Object
Firstday.setdate (1); Set Date Object FirstDay 1th days
StartDay = Firstday.getday (); Make sure the first day of the month is the week

Define the Chinese array group for Sunday and month
var daynames = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthnames = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
Create a Date Object
var newdate = new Date ();

Create a table
document.write ("< TABLE border= ' 0 ' cellspacing= ' 0 ' cellpadding= ' 2 ' align= ' CENTER ' bgcolor= ' #0080FF ' >")
document.write ("< tr>< td>< table border= ' 0 ' cellspacing= ' 1 ' cellpadding= ' 2 ' bgcolor= ' #88FF99 ' >");
document.write ("< tr>< th colspan= ' 7 ' bgcolor= ' #C8E3FF ' >");

Show current date and Sunday
Document.writeln ("< FONT style= ' font-size:9pt; Color: #FF0000 ' > ' + newdate.getyear () + "year" + Monthnames[newdate.getmonth ()] + "" + newdate.getdate () + "Day" + DayNames [Newdate.getday ()] + "</font>");

//Show Monthly calendar header
Document.writeln ("</th></tr>< tr>< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Day </font></th> ');
Document.writeln ("< th bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > I </font></th> ');
Document.writeln ("< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Two </font></th> ');
Document.writeln ("< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Three </font></th> ');
Document.writeln ("< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Four </font></th> ');
Document.writeln ("< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Five </font></th> ');
Document.writeln ("< TH bgcolor= ' #0080FF ' >< FONT style= ' font-size:9pt; Color:white ' > Six </font></th> ');
Document.writeln ("</tr>< tr>");

Show "Linges" in front of month
column = 0;
for (i=0 I
Document.writeln ("\n< td>< FONT style= ' font-size:9pt ' > </font></td>");
column++;
}

If the current day is highlighted (red), otherwise normal (black)
For (I=1 i<=daysofcurrentmonth; i++) {
if (i = = ThisDay) {
Document.writeln ("</td>< TD align= ' CENTER ' >< FONT style= ' font-size:9pt; Color: #ff0000 ' >< b> ')
}
else {
Document.writeln ("</td>< TD bgcolor= ' #88FF99 ' align= ' CENTER ' >< FONT style= ' font-size:9pt;font-family") : Arial;font-weight:bold; Color: #000000 ' > ');
}
Document.writeln (i);
if (i = = ThisDay) Document.writeln ("</font></td>")
column++;
if (column = = 7) {
Document.writeln ("< tr>");
column = 0;
}
}
Document.writeln ("< tr>< TD colspan= ' 7 ' align= ' CENTER ' valign= ' top ' bgcolor= ' #0080FF ' >")
Document.writeln ("< FORM name= ' time ' >")

Show Current Time
Document.writeln ("Current time:< INPUT type= ' Text ' name= ' textbox ' align= ' top ' ></font></td>< </table> ")
Document.writeln ("</td></tr></table></form>");
}
</script>

< SCRIPT language= "JavaScript" >
Initializing control variables
var timerid = null;
var timerrunning = false;

Defining time Display functions
function StopTime () {
if (timerrunning)
Cleartimeout (Timerid);
Timerrunning = false;}

To define a display time function
function Showtime () {
var newdate = new Date ();
var hours = newdate.gethours ();
var minutes = newdate.getminutes ();
var seconds = newdate.getseconds ()
var timevalue = "" + (Hours >12)? hours-12:hours)
TimeValue + + (minutes < 10)? ": 0": ":") + minutes
TimeValue + + (seconds < 10)? ": 0": ":") + seconds
TimeValue + = (hours >= 12)? "PM": "Morning"
Document.time.textbox.value = TimeValue;
Timerid = settimeout ("Showtime ()", 1000)//set timeout, make time dynamic display
Timerrunning = true;}

Show Current Time
function StartTime () {
StopTime ();
Showtime ();}
</script>

(2) Insert JavaScript script in HTML document body < body>...</body>, and add some properties to < body> tag:

< body text= "#000000" topmargin= "0" >
< script language= "javascript" type= "Text/javascript" >
Calendar (); Show Month calendar
</script>
</body>

2, switch to Design view, insert a layer in the page, and put the JavaScript script icon representing the body of the HTML document (if the icon does not appear, select view>visual aids>invisible Elements menu command) to drag into the layer, As shown in the following figure.

3, select the layer in the page, then in the Behaviors (behavior) panel (if not open, select Window>behaviors), click the "+" button, from the pop-up menu select drag Layer (drag layer) command.

4, in the Pop-up Drag Layer dialog box with the default option, click the OK button. At this point, the Behaviors panel adds the onclick (click) event and the drag layer action.

5, save the file, browsing in the browser, with the mouse hold down the monthly calendar can be dragged freely in the page.

What's it like, pretty cool?