1、引入jquery，编写日历页面代码，下面是一个简单的日历模板，到时候可以根据自身的要求更改样式，以及html代码是否利用jquery编辑html：<div id="calendar"> <div id="serch"> <h3>简单日历</h3> <div> <span>年：</span> <select id="year" style="width:100px"> <option>2014</option> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> <span>月：</span> <select id="month" style="width:100px"> <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>11</option> <option>12</option> </select> </div> </div> <div id="table"> <div id="head"> <div class="row"> <div class="column first">日</div> <div class="column">一</div> <div class="column">二</div> <div class="column">三</div> <div class="column">四</div> <div class="column">五</div> <div class="column">六</div> </div> </div> <div id="body"> <div class="row"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="row" id="isshow"> <div class="column first"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> </div></div>css：#calendar{ width: 700px; height: 500px; text-align: center; border: 1px solid #000;}#serch{ width: 650px; height: 70px; padding-bottom: 20px;}#table{ width: 650px;}#serch,#table{ margin:auto;}h3{ border: 1px solid #000; padding: 1em 0; margin: 5px auto;}.row{ overflow: hidden;}.column{ float:left; width: 91.5px; height: 70px; border: 1px solid #000; border-left: none; border-top: none; line-height:35px; font-size: 12px; font-family: 宋体;}.first{ border: 1px solid #000; border-top: none;}#head{ width: 650px;}#head .column{ height: 30px; font-size: 18px; font-family: 宋体; font-weight:bold; line-height:30px; border-top: 1px solid #000;}#isshow{ display:none;}
2、现在就是重点来了，首先创建一个方法： functioncalendarTable（year,month）{}，其中year，month为int类型参数
3、然后，方法主体中先根据year和month参数得到Date对象以及当前月共有多少天var date = new Date(year + "/" + month + "/1"); var days = 0; if(month == 2 || month == 4 || month == 6 || month == 9 || month == 11){//小月 days = 30; } else if(month == 2) { if(year % 4 == 0 || year % 100 == 0){//闰年是二月份天数 days = 29; } else { days = 28; } } else{//大月 days = 31; }
4、接着获取当前月第一天是星期几以及系统时间 var index = date.getDay();//0(星期日)-6(星期六) var newYear = new Date().getFullYear();//目前系统时间是哪一年 var nowMonth = new Date().getMonth() + 1;//目前系统时间是哪一月 var nowDay = new Date().getDate();//目前系统时间是几号
5、最后就是渲染日历html：var rows = $("#body .row"); var day = 1;//循环行 for(var i = 0; i < 6; i++){//循环列 for(var j = index; j < 7; j++){ var html = day; $(rows[i]).find(".column").eq(j).html(html);//为目前系统时间时变色 if(newYear == year && nowMonth == month && nowDay == day){ $(rows[i]).find(".column").eq(j).css({ backgroundColor: "gray", color: "red" }); } if(day == days){ if(i == 5){$("#isshow").css("display","none"); } return; } day++ } index = 0; }