爱站程序员基地案例：制作一个简单日历
如下日历的制作思路：先写了三个月的框架，以中间的月份作为当前月份，先获取当前月份的天数，第一天是周几来确定第一天的位置，然后再前后进行补白，计算上月和下个月的天数和位置。年份同理。（每年的农历暂无计算方式，该日历中无农历的写法）
完整代码如下：
<!DOCTYPE html><html><head lang=\"en\"><meta name=\"viewport\" content=\"width=320,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no\"><meta charset=\"UTF-8\"><title></title><link rel=\"stylesheet\" href=\"./css/index.css\"/></head><body><div class=\"calendar\"><div class=\"calendar_title\"><span class=\"year\"><div class=\"year_list\"><span>2019</span><span>2020</span><span>2021</span></div></span><span class=\"txt_title\">年</span><span class=\"month\"><div class=\"month_list\"><span>06</span><span>07</span><span>08</span></div></span><span class=\"txt_title\">月</span><span class=\"week\">周六</span></div><div class=\"calendar_week\"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div><div class=\"calendar_list\"><div class=\"calendar_day\"><div class=\"day_1\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_2\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_3\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_4\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_5\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_6\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div></div><div class=\"calendar_day\"><div class=\"day_1\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_2\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_3\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_4\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_5\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_6\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div></div><div class=\"calendar_day\"><div class=\"day_1\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_2\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_3\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_4\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_5\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div><div class=\"day_6\"><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div><div class=\"day_list\"></div></div></div></div></div><script src=\"js/jquery-1.9.1.js\"></script><script src=\"js/calendar.js\"></script></body></html>
