Every day a JS small demo calendar production. Key points of knowledge: date functions and flexible use of function encapsulation

Last Update:2017-06-05 Source: Internet

Author: User

Tags getdate time 0

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
TD {
Text-align:center;
}
</style>

<body>

<table id= "tab" width= "100%" border= "1" >
<thead>
<tr>
<th> Day </th>
<th> a </th>
<th> two </th>
<th> three </th>
<th> Four </th>
<th> Five </th>
<th> Six </th>
</tr>
</thead>
<tbody></tbody>
</table>

var yearselectelement = document.queryselector (' #yearSelect ');
var monthselectelement = document.queryselector (' #monthSelect ');
var tbody = document.queryselector (' tbody ');
var strongelement = document.queryselector (' strong ');

var nowdate = new Date ();

/*
* Dynamically generated option
* */
var html = ';
for (var i=1970; i<2100; i++) {
if (i = = Nowdate.getfullyear ()) {
html = ' <option selected> ' + i + ' </option> ' + html;
} else {
html = ' <option> ' + i + ' </option> ' + html;
}

}
yearselectelement.innerhtml = html;

var html = ';
for (var i=0; i<12; i++) {
if (i = = Nowdate.getmonth ()) {
HTML + = ' <option value= "' +i+ '" selected> ' + (i+1) + ' </option> ';
} else {
HTML + = ' <option value= "' +i+ '" > ' + (i+1) + ' </option> ';
}

}
monthselectelement.innerhtml = html;

/*
* Default display when the year before and month of the calendar
* */
Calendar (Nowdate.getfullyear (), Nowdate.getmonth ());

/*
* Regenerate calendar based on selected year and month
* */
Yearselectelement.onchange = Monthselectelement.onchange = function () {
Calendar (Yearselectelement.value, monthselectelement.value);
};

function calendar (year, month) {
Year = number (year);
month = number (month);
strongelement.innerhtml = year + ' years ' + (month+1) + ' month ';

var html = ' <tr> ';
for (var i=1; i<=42; i++) {

if (i%7 = = 1 && i! = 1) {
HTML + = ' </tr><tr> ';
}

var v = i-getfirstday (year, month);

if (V < 1 | | v > getDays (Year, month)) {
HTML + = ' <td> </td> ';
} else {
if (i% 7 = = 1 | | I% 7 = = 0) {
HTML + = ' <td style= "color:red" > ' + V + ' </td> ';
} else if (
Year = = Nowdate.getfullyear ()
&&
month = = Nowdate.getmonth ()
&&
v = = Nowdate.getdate ()
) {
HTML + = ' <td style= ' background:red; Color:white; " > ' + V + ' </td> ';
} else {
HTML + = ' <td> ' + V + ' </td> ';
}
}

}
HTML + = ' </tr> ';
tbody.innerhtml = html;
}

/*
* Gets the total number of days for the specified display year month
* */
function GetDays (y, m) {
return new Date (Y, m+1, 1,-1, 0, 0). GetDate ();

/*
* Get the 1st of next January, 1 time 0 minutes 0 seconds date
*-1: Actually the day before, that is, last month 23 o'clock
* */
var date = new Date (y, m+1, 1,-1, 0, 0);
/*
* Last month's date is actually the total number of days of last month
* */
return Date.getdate ();
}

/*
* Gets the day of the week that specifies the month of the year that is displayed
* */
function Getfirstday (y, m) {
return new Date (Y, M, 1). GetDay ();
}
</script>
</body>

Every day a JS small demo calendar production. Key points of knowledge: date functions and flexible use of function encapsulation

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More