JavaScript日历
来源：互联网 发布：rust golang 编辑：程序博客网 时间：2024/05/16 10:16
最近在看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> 阅读全文
0 0
- JavaScript日历
- Javascript日历
- javascript 日历
- javascript日历
- JavaScript 日历
- javascript日历
- JavaScript日历
- 一个JavaScript的日历
- 一个JavaScript的日历
- JavaScript小日历
- JavaScript极品小日历
- javascript 日历选择
- javascript日历时间控件
- javascript日历时间控件
- 日历——javascript
- javascript农历日历
- javascript日历控件
- 使用javascript生成日历
- iOS9之UIStackView
- ［python］python没有null
- Swift版-表情键盘展示和仿网易新闻首页左右滑动
- Swift项目创建桥接文件
- HTML5基本介绍
- JavaScript日历
- HTML5学习笔记之基础标签
- HTML5学习笔记之表格标签
- App产生学习笔记（1）
- HTML5学习笔记之表单标签
- HTML5学习笔记之音视频标签
- Swift4.0版-H5页面实现长按保存图片
- Swift4.0新特性之String、Array和Dictionary
- JavaScript基本语法01
