最近在看CSS的书的时候,其中有一个示例是一个日历。于是想到要使用JavaScript写一个简单的日历,能够实现上一月,下一月的功能。我就写了一个,代码量不大,容易理解,只要弄懂了基本原理,大家可以在此基础上自由发挥,在这里分享给大家:
1.首先是判断当前年是闰年还是平年,因为闰年和平年的二月份的天数不一样,闰年是29天,平年是28天:
//判断是否是闰年能够被4整除,不能被400整除,或者能够被4整除,但是不能被100整除,能被400整除的,都是闰年
function get_true(year) {
return year % 4 == 0 ? (year % 100 != 0 ? true : (year % 400 == 0 ? true : false)) : false
}
2.获取当前的年、月、日,要说明一点,当前月是从0开始的,0代表1月份,11代表12月份
var data = new Date();
var year = data.getFullYear(); //获取当前年份
var month = data.getMonth(); //获取当前月份
var day = data.getDate(); //获取当前日
$("#year").text(year + "年");
$("#month").text((month + 1) + "月");
3.获取当某个月份的天数
//获取每月的天数
function getDayCount(year, month) {
var is_true = get_true(year);
if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
return 31;
} else if (month == 3 || month == 5 || month == 8 || month == 10) {
return 30;
} else if (month == 1) {
if (is_true) {
return 29;
} else {
return 28;
}
}
}
4.把当前月的日历要显示的天数放在一个数组里,包括上一个月剩下的天数,当前月天数,以及下一个月的部分天数,如果当前月的1号不等于周日。那么就需要上一个月的天数来补全第一行的日期。如果当前月的最后一天不是周六,就需要下一个月的天数来补全最后一行的日期,所以当前月日历的组成可能会包括上一个月的天数和下一个月的天数,但是上一个月的天数和下一个月的天数最多不超过6天。这样的话让日历显示更人性化
//获取页面上显示的所有日期
function getWeek(year,month) {
var d = new Date(year, month, 1);
var lastCount = [0, 1, 2, 3, 4, 5, 6];
var mynum=d.getDay();
var num=lastCount[mynum];//前面剩余几个上月日期
var today = new Date(); //获取当前日期
var nowDay = today.getDate();//获取当前日期中的日,需要在日历中高亮显示
var newCount=getDayCount(year, month);//获取当前月的天数
var lastCount=getDayCount(year, (month-1));//获取上一个月的天数
var array=new Array();
for (var i = num; i >0; i--) {
array.push(lastCount-i+1);//在数组添加上月剩余的天数
}
for (var i = 1; i <= newCount; i++) {
array.push(i);//在数组添加本月天数
}
//如果数据正好填充满最后一行,那么就不添加下月的天数,如果没有填充满,差几个就填充几个下月的天数
var newCount=7-array.length%7;
if(newCount <7){
for (var i = 1; i <=newCount; i++) {
array.push(i);//在数组添加下月的天数
}
}
}
5.绘制日历。通过想页面插入html片段的方式插入
function addView(arr,nowDay,num,dayCount){
var html="";
for (var i = 0; i < arr.length; i++) {
//每一个周日都需要换行
if(i == 0 || i == 7 || i == 14 || i == 21 || i == 28 || i == 35){
if(i == 0){
html = html + "<tr>";
}else{
html = html + "</tr><tr>";
}
}
if(arr[i] == nowDay){//如果是当前日,则高亮
html = html +"<td class='selected'><a href='#'>"+arr[i]+"</a></td>"
}else if(i<num || i-num> dayCount-1){//如果是上一个月的剩余天数或者是下一个月的天数,样式设置为null
html = html +"<td class='null'>"+arr[i]+"</td>"
}else{//其它的样式正常
html = html +"<td><a href='#'>"+arr[i]+"</a></td>"
}
if(i == arr.length-1){
html = html +"</tr>"
}
}
//当切换月份的时候,需清空,重新插入html片段
$("#content tbody").empty().append(html);
}
6.上一月,下一月
//上月
$("#left").click(function(){
if (month>0) {
month--;
getWeek(year,month);
$("#month").text((month + 1) + "月");
}else{
year = year - 1;
month = 11;
getWeek(year,month);
$("#month").text((11 + 1) + "月");
$("#year").text(year + "年");
}
})
//下月
$("#right").click(function(){
if (month<11) {
month++;
getWeek(year,month);
$("#month").text((month + 1) + "月");
}else{
year = year + 1;
month = 0;
getWeek(year,month);
$("#month").text((month + 1) + "月");
$("#year").text(year + "年");
}
})
这就完成了一个简单日历的编写,我在下面附上日历的完整代码,其中用到了jquery操作dom,所以在线引入了jquery。代码包含css样式,样式可以自己调整为自己喜欢的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="npc-guangming">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<title>日历</title>
<style>
.cal{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-collapse: separate;
border-spacing: 0;
text-align: center;
color:#333;
}
.cal th,.cal td{
margin: 0;
padding: 0;
}
.cal caption{
font-size: 1.25em;
padding-top: 0.692em;
padding-bottom: 0.692em;
background-color: #d4dde6;
}
.cal caption [rel='prev']{
float: left;
margin-left: 0.2em;
}
.cal caption [rel='next']{
float: right;
margin-right: 0.2em;
}
.cal caption a:link,
.cal caption a:visited{
text-decoration: none;
color: #333;
padding:0 0.2em;
}
.cal caption a:hover,
.cal caption a:focus,
.cal caption a:active{
background-color: #6d8ab7;
}
.cal thead th{
background-color: #d4dde6;
border-bottom: 1px solid #a9bacb;
font-size: 0.875em;
}
.cal tbody{
color: #a4a4a4;
text-shadow: 1px 1px 1px white;
background-color: #d0d9e2;
}
.cal tbody td,
.cal tbody td.null:hover{
border-top:1px solid #e0e0e1;
border-right: 1px solid #9f9fa1;
border-bottom: 1px solid #acacad;
border-left: 1px solid #dfdfe0;
}
.cal tbody a{
display: block;
text-decoration: none;
color: #333333;
background-color: #c0c8d2;
font-weight: bold;
padding:0.385em 0.692em 0.308em 0.692em;
}
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active,
.cal tbody .selected a:active,
.cal tbody .selected a:link,
.cal tbody .selected a:focus,
.cal tbody .selected a:hover,
.cal tbody .selected a:visited{
background-color: #6d8ab7;
color: white;
text-shadow: 1px 1px 1px #22456b;
-webkit-box-shadow: inset 2px 2px 3px #22456b;
-moz-box-shadow: inset 2px 2px 3px #22456b;
}
.cal tbody td:hover,
.cal tbody td.selected{
border-top:1px solid #2a3647;
border-right: 1px solid #465977;
border-bottom: 1px solid #576e92;
border-left: 1px solid #466080;
}
</style>
</head>
<body>
<table class="cal" id="content">
<caption>
<label id="left" rel="prev"><</label><span id="year"></span><span id="month"></span> <label id="right" rel="next">></label>
</caption>
<calgroup>
<col id="Sun" align="left"/>
<col id="Mon" align="left"/>
<col id="Tue" align="left"/>
<col id="Wed" align="right"/>
<col id="Thur"align="right" />
<col id="Fri" align="right"/>
<col id="Sat" align="right"/>
</calgroup>
<thead>
<tr>
<th scope="col">Sun</th>
<th scope="col">Mon</th>
<th scope="col">Tue</th>
<th scope="col">Wed</th>
<th scope="col">Tur</th>
<th scope="col">Fir</th>
<th scope="col">Sat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
var data = new Date();
var year = data.getFullYear(); //获取当前年份
var month = data.getMonth(); //获取当前月份
var day = data.getDate(); //获取当前日
$("#year").text(year + "年");
$("#month").text((month + 1) + "月");
//判断是否是闰年 能够被4整除,不能被400整除,或者能够被4整除,但是不能被100整除,能被400整除的,都是闰年
function get_true(year) {
return year % 4 == 0 ? (year % 100 != 0 ? true : (year % 400 == 0 ? true : false)) : false
}
//获取每月的天数
function getDayCount(year, month) {
var is_true = get_true(year);
if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11) {
return 31;
} else if (month == 3 || month == 5 || month == 8 || month == 10) {
return 30;
} else if (month == 1) {
if (is_true) {
return 29;
} else {
return 28;
}
}
}
//获取页面上显示的所有日期
getWeek(year,month);
function getWeek(year,month) {
var d = new Date(year, month, 1);
var lastCount = [0, 1, 2, 3, 4, 5, 6];
var mynum=d.getDay();
var num=lastCount[mynum];//前面剩余几个上月日期
var today = new Date(); //获取当前日期
var nowDay = today.getDate();//获取当前日期中的日,需要在日历中高亮显示
var newCount=getDayCount(year, month);//获取当前月的天数
var lastCount=getDayCount(year, (month-1));//获取上一个月的天数
var array=new Array();
for (var i = num; i >0; i--) {
array.push(lastCount-i+1);//在数组添加上月剩余的天数
}
for (var i = 1; i <= newCount; i++) {
array.push(i);//在数组添加本月天数
}
//如果数据正好填充满最后一行,那么就不添加下月的天数,如果没有填充满,差几个就填充几个下月的天数
var newCount=7-array.length%7;
if(newCount <7){
for (var i = 1; i <=newCount; i++) {
array.push(i);//在数组添加下月的天数
}
}
//重新获取当前月的天数,用做参数
var dayCount = getDayCount(year, month)
addView(array,nowDay,num,dayCount);
}
function addView(arr,nowDay,num,dayCount){
var html="";
for (var i = 0; i < arr.length; i++) {
//每一个周日都需要换行
if(i == 0 || i == 7 || i == 14 || i == 21 || i == 28 || i == 35){
if(i == 0){
html = html + "<tr>";
}else{
html = html + "</tr><tr>";
}
}
if(arr[i] == nowDay){//如果是当前日,则高亮
html = html +"<td class='selected'><a href='#'>"+arr[i]+"</a></td>"
}else if(i<num || i-num> dayCount-1){//如果是上一个月的剩余天数或者是下一个月的天数,样式设置为null
html = html +"<td class='null'>"+arr[i]+"</td>"
}else{//其它的样式正常
html = html +"<td><a href='#'>"+arr[i]+"</a></td>"
}
if(i == arr.length-1){
html = html +"</tr>"
}
}
//当切换月份的时候,需清空,重新插入html片段
$("#content tbody").empty().append(html);
}
//上月
$("#left").click(function(){
if (month>0) {
month--;
getWeek(year,month);
$("#month").text((month + 1) + "月");
}else{
year = year - 1;
month = 11;
getWeek(year,month);
$("#month").text((11 + 1) + "月");
$("#year").text(year + "年");
}
})
//下月
$("#right").click(function(){
if (month<11) {
month++;
getWeek(year,month);
$("#month").text((month + 1) + "月");
}else{
year = year + 1;
month = 0;
getWeek(year,month);
$("#month").text((month + 1) + "月");
$("#year").text(year + "年");
}
})
</script>
</body>
</html>