介绍 & lt; ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0,过渡//EN",“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比;
& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml", xml: lang=皕h-cn"比;
& lt; head>
,& lt; meta http-equiv=癈ontent-Type",内容=皌ext/html; charset=UTF-8",/比;
,& lt; title> js的日历& lt;/title>
,& lt; meta name=発eywords",内容=肮丶至斜怼?/比;
,& lt; meta name=癲escription",内容=巴趁枋觥?/比;
,& lt; link rel=皊tylesheet",类型=拔谋?css" https://www.yisu.com/zixun/, href="/>
<风格type=" text/css ">
表tr td {
宽度:27 px;
text-align:中心;
}>
(函数(){//获取日历的函数,参数是年份年和月份月,默认是今年当月的日历
函数getcalendar(年、月){
年=一年吗?年:新日期().getFullYear ();//月是0开始到11结束的,获取当前月份必须加1
月=月?月:新日期().getMonth () + 1;
var最后=new日期(年,第1个月,0);
var lastdate=last.getDate();//获取上个月的最大日期
var lastday=last.getDay();//获取上个月最大日期的星期几
var月=new日期(年、月,0);
var Maxdate=months.getDate();//获取这个月最大的日期//获取当前的日期,为的是高亮显示当前的日期
今天var=新的日期().getDate ();
.getFullYear var今年=new日期()();
var thismonth=new日期().getMonth () + 1;
var str=' <表> \ + +年的年+月+的月 \> 日 一 二 三 四 五 六 ';//获取上个月在这个月份中存在的最后日期
var remainlastdate=lastdate - lastday;
var t=1;
str +=' ';
(var g=0; g <=6; g++) {//星期是从0开始到6结束的,小于等于上个月最大星期的日期则是上个月的日期
如果(g <=lastday) {
str +=' + remainlastdate + + +的 ;
其他}{//高亮显示当前日期
如果今年& & & & thismonth====年月今天==t) {
str +=' ' t + + + +” ;//假如不是当前月份则默认1为高亮日期
}else if(今年!=& & t==1) | | (thismonth !=月& & t==1)) {
str +=' ' t + + + +” ;
其他}{//该月份的普通日期
str +=' ' t + + + +” ;
}
}
}
str += ”;//除去上面的部分,这个月从哪里开始
var remainlastday=6 - lastday + 1;
var nextMonthday=1;//下一个月份的开始日期//这里我最大值为5是为了兼容所有的月份,有的月份可能跨越6个tr
(var=1, <=5;我+ +){
str +=' ';
(var j=0; <7; j + +) {
如果(remainlastday <=Maxdate) {
如果今年& & & & thismonth====年月今天==remainlastday) {
str +=' + remainlastday + + +的 ;
其他}{
如果((今年!=& & remainlastday==1) | | (thismonth !=月& & remainlastday==1)) {//剩下的天数从这里开始的话,默认的第一天还是为红色
str +=' + remainlastday + + +的 ;
其他}{
str +=' + remainlastday + + +的 ;
}
}
其他}{
str +=' + nextMonthday + + +的 ;
}
}
str += ”;
}
str +=>
使用JavaScript怎么实现一个日历显示效果函数?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
效果如下:
这个日历效果有高亮显示,我实现的思维比较简单。
我把上面的日历效果用表格表生成,分成两个部分。
第一个部分:就是前面的第一排,我用一行& lt; tr> & lt;/tr>显示,这一部分表示的上个月份留下来的日期和这个月份的日期的混合日期;
第二部分:就是剩下的所有排,这里我用五行& lt; tr> & lt;/tr>显示,这一部分表示的是这个月份和下个月份的日期的混合日期。
这里为什么要用6行& lt; tr> & lt;/tr>来显示日历的效果呢?原因是有的月份跨越了6行,所以为了兼容所有的月份,只好用6行了。
下面是代码: