JavaScript快速实现日历效果
程序员文章站
2022-03-24 09:05:28
本文实例为大家分享了javascript快速实现日历效果的具体代码，供大家参考，具体内容如下效果图代码
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。