本文实例为大家分享了JavaScript快速实现日历效果的具体代码，供大家参考，具体内容如下
效果图
代码
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
* {
margin: 0;
padding: 0;
}
#calendar {
background-color: #9900ff;
color: #fff;
border-radius: 5px;
margin: 100px auto;
}
#title {
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 20px;
}
#today {
color: #f00;
font-weight: bold;
}
.poin {
cursor: pointer;
cursor: hand;
}
</ style >
< script >
window.onload=function(){
var form = document.getElementById('calendar');
// 通过日历对象去调用自身的init方法
calendar.init(form);
}
var calendar = {
year: null,
month: null,
//日的数组
dayTable: null,
//初始化函数
init(form) {
// 1获取日数组
this.dayTable=form.getElementsByTagName('td');
//2创建日历,传入当前时间
this.createCalendar(form,new Date());
var nextMon=form.getElementsByTagName('th')[2];
var preMon=form.getElementsByTagName('th')[0];
preMon.onclick=function(){
calendar.clearCalendar(form)
var preDate=new Date(calendar.year,calendar.month-1,1);
calendar.createCalendar(form,preDate)
}
nextMon.onclick=function(){
calendar.clearCalendar(form)
var nextDate=new Date(calendar.year,calendar.month+1,1);
calendar.createCalendar(form,nextDate)
}
},
//清除日历数据
clearCalendar(form){
var tds=form.getElementsByTagName('td');
for (var i = 0; i < tds.length ; i++) {
tds[i] .innerHTML = ' ' ;
// 清除今天的样式
tds[i] .id = '' ;
}
},
// 3生成日历
// from table表格 date要创建的日期
createCalendar(form,date){
//获取此时的年份
this.year = date .getFullYear();
//获取此时的月份
this.month = date .getMonth();
//年份月份写入日历
form.getElementsByTagName('th')[1] .innerHTML = this .year+"年"+(this.month+1)+"月";
//获取本月的天数
var dataNum = this .getDateLen(this.year,this.month);
var fristDay = this .getFristDay(calendar.year,calendar.month);
// 循环将每一天的天数写入到日历中
// 让i表示日期。
for (var i = 1 ; i <= dataNum; i++) {
this.dayTable[fristDay+i-1] .innerHTML =i;
var nowDate = new Date();
if(i ==nowDate.getDate() && calendar.month ==nowDate.getMonth()&&calendar.year == nowDate.getFullYear()){
// 将当期元素的id设置为today
calendar.dayTable[i+fristDay-1] .id = "today" ;
}
}
},
// 获取本月份的天数
getDateLen(year,month){
//获取下个月的第一天
var nextMonth = new Date(year,month+1,1);
// 设置下月第一天的小时-1，也就是上个月最后一天的小时数，随便减去一个值不要超过24小时
nextMonth.setHours(nextMonth.getHours()-1);
//获取此时下个月的日期,就是上个月最后一天.
return nextMonth.getDate();
},
// 获取本月第一天为星期几。
getFristDay:function(year,month){
var fristDay = new Date(year,month,1);
return fristDay.getDay();
}
}
</script>
</ head >
< body >
< table id = "calendar" >
< tr >
<!-- 向左箭头 -->
< th class = "poin" ><<</ th >
<!-- 年月 -->
< th id = "title" colspan = "5" ></ th >
<!-- 向右箭头 -->
< th class = "poin" >>></ 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 >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_50821119/article/details/114435766
查看更多关于JavaScript快速实现日历效果的详细内容...