简单的js动态日历

最新推荐文章于 2022-04-27 23:37:18 发布

转载最新推荐文章于 2022-04-27 23:37:18 发布 · 2.6k 阅读

文章标签：

#日历 #calendar #function #date #table #xhtml

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的日历生成器。通过简单的HTML结构配合JavaScript代码，该生成器能够显示当前月份的日历，并允许用户通过按钮切换查看不同月份。此外，它还会突出显示今天所在的日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>calendar2</title>
<style type="text/css">
#calendar{
background:#000;
color:#FFF;
font-size:0.8em;
}
#tittle{
font-size:1.4em;
padding:4px 0.55em;
}
#days th {
font-weight:bold;
text-align:center;
padding:4px 0.55em;
}
#calendar td{
text-align:center;
padding:4px 0.55em;
}
#today{
color:#F00;
font-weight:bold;
}
</style>
<script type="text/javascript">
var calendar = {
dayTable:null, //初始化TABLE
year:null, //初始化年
month:null, //初始化月份
getFirstDay:function(year,month){ //获取每个月第一天再星期几
var firstDay = new Date(year,month,1);
return firstDay.getDay(); //getDay()方法来获取
},
getMonthLen:function(year,month){ //获取当月总共有多少天
var nextMonth = new Date(year,month+1,1); //获取下个月的第一天
nextMonth.setHours(nextMonth.getHours() - 3); //由于获取的天是0时,所以减去3小时则可以得出该月的天数
return nextMonth.getDate(); //返回当天日期
},
createCalendar:function(form,date){ //创建日历方法
calendar.year = date.getFullYear(); //获得当时的年份,并赋值到calendar属性year中,以便别的方法的调用
calendar.month = date.getMonth(); //跟上面获取年份的目的一样
form.getElementsByTagName('th')[1].innerHTML = calendar.year + '年 ' + (calendar.month + 1) + '月'; //插入年份和月份
calendar.clearCalendar(form); //清空TABLE
var monthLen = calendar.getMonthLen(calendar.year,calendar.month); //获取月份长度
var firstDay = calendar.getFirstDay(calendar.year,calendar.month); //获取月份首天为星期几
for(var i = 1;i <= monthLen;i++){ //循环写入每天的值进入TABLE中
calendar.dayTable[i+firstDay-1].innerHTML = i; //i为循环值,加上第一天的星期值刚可以对应TABLE位置,但由于数组从0开始算,所以需要减去1
if((i+firstDay-2) == new Date().getDate() && calendar.month == new Date().getMonth() && calendar.year == new Date().getFullYear()){ //判断是否是当天
calendar.dayTable[i+firstDay-1].id = 'today';
}
}
},
clearCalendar:function(form){ //清空TABLE方法
this.dayTable = form.getElementsByTagName('td');
for(var i = 0;i < this.dayTable.length;i++){
this.dayTable[i].innerHTML = ' ';
this.dayTable[i].id = '';
}
},
init:function(form){ //主方法
this.dayTable = form.getElementsByTagName('td');
this.createCalendar(form,new Date());
var preMon = form.getElementsByTagName('th')[0];
var nextMon = form.getElementsByTagName('th')[2];
preMon.onclick = function(){ //当点击左按钮时,减去一个月,并重绘TABLE
calendar.createCalendar(form,new Date(calendar.year,calendar.month-1,1));
}
nextMon.onclick = function(){ //当点击右按钮时,加上一个月,并重绘TABLE
calendar.createCalendar(form,new Date(calendar.year,calendar.month+1,1));
}
}
}
window.onload = function(){
var calendars = document.getElementById('calendar');
calendar.init(calendars);
}
</script>
</head>
<body>
<table id="calendar" cellspacing="0">
<tr>
<th style="cursor:pointer;cursor:hand;"><<</th>
<th id="tittle" colspan="5"> </th>
<th style="cursor:pointer;cursor:hand;">>></th>
</tr>
<tr id="days">
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

<<						>>
日	一	二	三	四	五	六