<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js日历</title>
<style>
td { height:60px; width:60px; text-align:center;background:#FF8040;}
.xingqi td { background:red;}
.bu{ background:#CCC;}
</style>
<script type="text/javascript">
window.onload=function(){
var oSelect=document.getElementById("select");
var oSelect2=document.getElementById("select2");
oSelect.onchange=function(){
toShow(this.value,oSelect2.value)
}
oSelect2.onchange=function(){
toShow(oSelect.value,this.value)
}
function toShow(nian,yuan){
var table=document.getElementById("div1");
var odate=new Date();
var Days = new Date(nian,yuan,0).getDate();
var num=new Date(nian,yuan-1,1).getDay();//判断第一天是星期几
var num2=new Date(nian,yuan-1,Days).getDay();//判断最后一天是星期几
var theMonth=new Date().getMonth();
var str="";
var inum=0;
var xqarry=["日","一","二","三","四","五","六"]
str+="<table>"
str+="<tr class='xingqi'>"
for(var i=0;i<7;i++)
{
str+="<td>"+xqarry[i]+"</td>"
}
str+="</tr>";
for(var i=0;i<num;i++){
str+="<td class='bu'></td>";
inum++;
}
for(var i=1;i<Days+1;i++)
{
inum++;
str+="<td>"+i+"</td>";
if(inum%7==0)
{
str+="</tr>";
}
}
for(var i=0;i<6-num2;i++){
str+="<td class='bu'></td>";
inum++;
}
str+="</table>"
table.innerHTML=str;
}
toShow(oSelect.value,oSelect2.value);
}
</script>
</head>
<body>
<select id="select">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option selected>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
</select>
<select id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option selected>11</option>
<option>12</option>
</select>
<div id="div1"></div>
</body>
</html>
