1、源代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>简单日历</title><style type="text/css">*{padding: 0%;/*设置内边距*/margin: 0%;/*设置外边距*/}/*设置日历的背景色*/html, body{background:#f2f2f2;}/*设置整个页面的显示样式*/.calendar{margin: 45px;width: 450px;height: 350px;background: white;box-shadow: 0px 1px 1px rgba(0,0,0,.1);}/*标题的显示样式*/.title{height: 70px;border-bottom: 1px solid rgba(0,0,0,.1);position: relative;text-align: center;}/*标题中的月份显示样式*/#calendar-title{font-size: 25px;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;padding: 14px 0 0 0;}/*标题中的年份显示样式*/#calendar-year{font-size: 15px;font-family: Arial, Helvetica, sans-serif;font-weight: normal;}/*上个月的超链接显示样式*/#pre{position: absolute;top: 0px;left: 0px;background: url(image/pre.png) no-repeat 50% 50%;/*没规定大小时，图片显示 0X0*/width: 60px;height: 70px;}/*下个月的超链接显示样式*/#next{position: absolute;top: 0px;right: 0px;background: url(image/next.png) no-repeat 50% 50%;width: 60px;height: 70px;}.body-list ul{font-size: 14px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;width: 100%;box-sizing: border-box;}.body-list ul li{list-style: none;display: block;width: 14.28%;float: left;/*规定行高，垂直居中*/height: 36px;line-height: 36px;box-sizing: border-box;text-align: center;}/*类选择器：设置所有class属性为green的标签的样式*/.green{color:#6ac13c;}/*设置已经过去的日期颜色*/.lightgrey{color:#a8a8a8;}/*设置将来的日期颜色*/.darkgrey{color:#565656;}/*日期当天用绿色背景绿色文字加以显示*/.greenbox{border: 1px solid #6ac13c;background: #e9f8df;}</style></head><body><div class="calendar"><div class="title"><h1 class="green" id="calendar-title">Month</h1><h2 class="green" id="calendar-year">Year</h2><a href="" id="pre"></a><a href="" id="next"></a></div><div class="body"><div class="lightgrey body-list"><!--使用无序列表标签显示星期--><ul><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul></div><!--使用无序列表标签显示日期，日期使用JavaScript动态获取，然后使用innerHTML设置<ul>标签之间的HTML--><div class="darkgrey body-list"><ul id="days"></ul></div></div></div><script type="text/javascript">var month_olypic = [31,29,31,30,31,30,31,31,30,31,30,31];//正常年份12个月对应的天数var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];//闰年中12个月对应的天数var month_name =["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];//定义要显示的月份数组//获取以上各个部分的idvar holder = document.getElementById("days");var prev = document.getElementById("prev");//上个月份的超链接idvar next = document.getElementById("next");//下个月份的超链接idvar ctitle = document.getElementById("calendar-title");var cyear = document.getElementById("calendar-year");//获取当天的年月日var my_date = new Date();var my_year = my_date.getFullYear();//获取年份var my_month = my_date.getMonth(); //获取月份，下标从0开始var my_day = my_date.getDate();//获取当前日期//根据年月获取当月第一天是周几function dayStart(month,year){var tmpDate = new Date(year, month, 1);return (tmpDate.getDay());}//根据年份判断某月有多少天，主要是区分闰年function daysMonth(month, year){var tmp1 = year % 4;var tmp2 = year % 100;var tmp3 = year % 400;if((tmp1 == 0 && tmp2 != 0) || (tmp3 == 0)){return (month_olypic[month]);//闰年}else{return (month_normal[month]);//非闰年}}function refreshDate(){var str = "";//计算当月的天数和每月第一天都是周几var totalDay = daysMonth(my_month,my_year);var firstDay = dayStart(my_month, my_year);//添加每个月前面的空白部分，即若某个月的第一天是从周三开始，则前面的周一，周二需要空出来for(var i = 0; i < firstDay; i++){str += "<li>"+"</li>";}//从一号开始添加到totalDay（每个月的总天数），并为pre，next和当天添加样式var myclass;for(var i = 1; i <= totalDay; i++){//如果是已经过去的日期，则用浅灰色显示if((my_year < my_date.getFullYear())||(my_year == my_date.getFullYear() &&my_month < my_date.getMonth()) || (my_year == my_date.getFullYear() &&my_month == my_date.getMonth() && i < my_day)){myclass = " class='lightgrey'";}//如果正好是今天，则用绿色显示else if(my_year == my_date.getFullYear() && my_month == my_date.getMonth() && i == my_day){myclass = "class = 'green greenbox'";}//将来的日期用深灰色显示else{myclass = "class = 'darkgrey'";}str += "<li "+myclass+">"+i+"</li>";}holder.innerHTML = str;//为日期的列表标签设置HTML；ctitle.innerHTML = month_name[my_month];//设置当前显示的月份cyear.innerHTML = my_year;//设置当前显示的年份}refreshDate();//显示日期，更新界面//上个月的点击事件pre.onclick = function(e){e.preventDefault();my_month--;if(my_month < 0){my_year--;my_month = 11;}refreshDate();//更新界面}//下个月的点击事件next.onclick = function(e){e.preventDefault();my_month++;if(my_month > 11){my_month = 0;my_year++;}refreshDate();//更新界面}</script></body></html>
