用jquery写的一个万年历（自写）

复制代码代码如下:
<！Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>
<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, 32）.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 = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日",];
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）;
//标记当前日期
$（"#t"+num）.css（"background","yellow"）;
}）;
</script>
</head>
<body>
<div id="main" class="main">
<center><h3>万年历</h3></center>
<select id="yearsel">
</select>年
<select id="monthsel">
</select>月<br><br>
<div id="title" class="title">
</div>
<div id="content" class="content">
</div>
</div>
</body>
</html>