jquery 日历如何制作

2025-11-24 03:55:28

1、引入jquery，编写日历页面代码，下面是一个简单的日历模板，到时候可以根据自身的要求更改样式，以及html代码是否利用jquery编辑

html：

<div>

</select>    

</select>

</div>

</div>

</div>

</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、现在就是重点来了，首先创建一个方法： function calendarTable（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;

}

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。