Copy Code code as follows:
<! Doctype html><meta http-equiv=content-type content= "Text/html;charset=utf-8" >
<style>
. main{
width:600px;
height:350px;
Background:gray;
Margin-left:auto;
Margin-right:auto;
Overflow:hidden;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
. title{
Text-align:center;
}
. date{
Float:left;
padding-left:31px;
}
. date1{
Float:left;
width:20px;
height:20px;
padding-top:10px;
padding-left:30px;
padding-right:30px;
}
. content{
margin-left:25px;
}
</style>
<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script>
function GetTime (year,month,day) {
y = Year
m = Month
D = Day
var mydate = new Date (year,month-1,day);
return mydate;
}
Function Days_in_month (year, month) {
y = year;
m = month;
return 32-new Date (y, M-1,). GetDate ();
}
function View (year,month) {
var w = getTime (year,month,1). Getday ()-1;
var num = days_in_month (year,month);
var index = 1;
Console.log (w);
var data = new Array ();
for (var d = 0; d < num+w; d++) {
if (d<w) {
Data[d] = ';
}else{
DATA[D] = index;
index++;
}
}
$ ("#content"). html (');
For (var k =0;k < data.length;k++) {
if (k%7==0) {
$ ("#content"). Append ("<div id= ' t" +k+ "' class= ' date1 ' >" +data[k]+ "</div><br>");
}else{
$ ("#content"). Append ("<div id= ' t" +k+ "' class= ' date1 ' >" +data[k]+ "</div>");
}
}
$ ("#content > div"). MouseOver (function () {
if ($ (this). Text ()!= ') {
$ (this). CSS (' background ', ' red ');
}
});
$ ("#content > div"). Mouseout (function () {
if ($ (this). Text ()!= ') {
$ (this). CSS (' background ', ' gray ');
}
});
}
$ (document). Ready (function () {
for (var t = 1970 T < 2999; t++) {
$ ("#yearsel"). Append ("<option value = '" +t+ "' >" +t+ "</option>");
}
for (var y = 1; y < 13;y++) {
$ ("#monthsel"). Append ("<option value = '" +y+ "' >" +y+ "</option>");
}
var year = new Date (). getFullYear ();
var month = new Date (). getmonth () +1;
var day = new Date (). GetDate ();
var w = getTime (year,month,1). Getday ()-1;
var num = day + w-1;
$ ("#yearsel"). Change (function () {
Year = $ ("#yearsel option:selected"). Text ();
Month = $ ("#monthsel option:selected"). Text ();
View (Year,month);
});
$ ("#monthsel"). Change (function () {
Year = $ ("#yearsel option:selected"). Text ();
Month = $ ("#monthsel option:selected"). Text ();
View (Year,month);
});
var odate = [' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ', ' Sunday ',];
for (var i = 0;i < 7;i++) {
$ ("#title"). Append ("<div class= ' Date ' ><b>" +odate[i]+ "</b></div>");
}
$ ("#yearsel option[value= '" +year+ "]"). attr ("selected", true);
View (Year,month);
Mark Current Date
$ ("#t" +num). CSS (' background ', ' yellow ');
});
</script>
<body>
<div id= "main" class= "main" >
<center><select id= "Yearsel" >
</select> year
<select id= "Monthsel" >
</select> Month <br><br>
<div id= "title" class= "title" >
</div>
<div id= "Content" class= "Content" >
</div>
</div>
</body>