<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
width:350px;
}
li{
list-style: none;
width:50px;
height: 50px;
float:left;
text-align: center;
line-height:50px;
font-size: 40px;
font-weight: bold;
font-family: Arial;
color: #777
}
</style>
</head>
<body>
<select name="" id="year">
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select>
<select name="" id="mon">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<ul>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="ul">
</ul>
</body>
<script>
var oYear = document.getElementById("year");
var oMons = document.getElementById("mon");
var oUl = document.getElementById("ul");
oMons.onchange = function(){
setMonth(oYear.value,oMons.value);
}
oYear.onchange = function(){
setMonth(oYear.value,oMons.value); //下拉列表的value作为实参
}
var str="",
now=null,
dayCount=null,
firstDay=null,
day=null;
function setMonth(year,month){ //形参
str="";
now = new Date(year,month,0);//日为0使日期变成上个月最后一天，所以这里的month会变成month-1，由于value值是1-12，所以month-1是当前月份。
// alert(now)
firstDay = new Date(year,month-1,1);//所选月份第一天
dayCount = now.getDate();//获取月份的天数
// alert(dayCount)
day = firstDay.getDay(); //通过firstDay变量获取日期，再获取周几。
for(var j=0;j<day;j++){//for循环日期是周几就生成几个空白li列表项
str+="<li></li>";
}
for(var i=1;i<=dayCount;i++){ //根据月份天数生成相应的包含日期数的li。
str+="<li>"+i+"</li>";
}
oUl.innerHTML = str; //把生成的空白li和带日期数的li 打印到ul列表内。
}
setMonth(2015,12);
</script>
</html>js制作日历，获取月份内有多少天。
最新推荐文章于 2023-03-30 16:23:54 发布
8511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
