js制作日历,获取月份内有多少天。

来源:互联网 发布:室内设计 知乎 编辑:程序博客网 时间:2024/04/29 22:29
<!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>

0 0