使用JavaScript制作如上图的简单日历，这里有两种做法：
第一种:
1. // 定义一个构造函数
2. function Calender(month){
3. var div
4. // 定义一个属性表示当前要展示的一个月份
5. this.currentMonth = month || new Date()
6. // 如果调用者每一传递month参数
7. // 那么this.currentMonth = month
8. // 如果调用者没有传递month参数
9. // 或者传了被认为false的值
10. // 那么this.currentMonth = new Date()
11.
12. // 将当前的月份的日期设置为1号
13. this.currentMonth.setDate(1)
14.
15. // 获取当前展示月的第一天
16. this.getFirstDate = function(){
17. var week = this.currentMonth.getDay()
18. if(week == 0) week = 7
19. week -= 2 // week = week -2
20. var firstDate = new Date(this.currentMonth)
21. // 得到星期一是几月几号
22. firstDate.setDate(-week)
23. // 将firstDate返还给本函数的调用者
24. return firstDate
25. }
26.
27. // 显示日历的主体部分
28. this.showCalenderMain = function(){
29. div = document.createElement('div')
30. div.style.width = '450px'
31. div.style.minHeight = '100px'
32. div.style.backgroundColor = 'red'
33. document.body.appendChild(div)
34. }
35.
36. // 展示日历的表头部分
37. this.showHeader = function(){
38. var table =document.createElement('table')
39. table.style.width = '100%'
40. // 在表格中插入一行
41. var tr = table.insertRow()
42. function getWeekName(week){
43. switch(week){
44. case 1:
45. return '一'
46. case 2:
47. return '二'
48. case 3:
49. return '三'
50. case 4:
51. return '四'
52. case 5:
53. return '五'
54. case 6:
55. return '六'
56. case 7:
57. return '日'
58. }
59. }
60. for(var i =1;i <= 7;i++){
61. var td = tr.insertCell()
62. td.style.color = 'white'
63. td.style.textAlign = 'center'
64. td.innerHTML =getWeekName(i)
65. }
66. div.appendChild(table)
67. }
68. this.showBody = function(){
69. var firstDate = this.getFirstDate().getTime()
70. var table = document.createElement('table')
71. table.style.width = '100%'
72. for(var i = 0;i<6;i++){
73. var tr = table.insertRow()
74. for(var j = 0;j < 7;j++){
75. var td = tr.insertCell()
76. td.style.textAlign = 'center'
77. td.style.color = 'white'
78. td.style.height = '2em'
79. var n = i * 7 + j
80. var cellDate = new Date(firstDate + n*24*60*60*1000)
81. console.log(cellDate)
82. td.innerHTML = cellDate.getDate()
83. if(cellDate.getMonth() != this.currentMonth.getMonth()){
84. td.style.color = 'gray'
85. }
86. if(cellDate.getDate() == new Date().getDate() && cellDate.getMonth() == new Date().getMonth()){
87. td.style.backgroundColor = 'rgba(0,0,255,0.3)'
88. }
89.
90. }
91. }
92. div.appendChild(table)
93. }
94. this.showToobar = function(){
95. var toolbar = document.createElement('div')
96. toolbar.style.fontSize = '1.5rem'
97. toolbar.style.color = 'white'
98. toolbar.style.padding = '20px'
99. toolbar.innerHTML = this.currentMonth.getFullYear() + '年' +
100. (this.currentMonth.getMonth() + 1) + '月'
101. div.appendChild(toolbar)
102.
103. var next = document.createElement('span')
104. next.innerHTML = '　>'
105. next.style.cursor = 'pointer'
106. next.style.float = 'right'
107. toolbar.appendChild(next)
108.
109. var calender = this
110. next.onclick =function(){
111. var month = calender.currentMonth.getMonth()
112. month++
113. calender.currentMonth.setMonth(month)
114. document.body.innerHTML = ''
115. calender.show()
116. }
117.
118. var prev = document.createElement('span')
119. prev.innerHTML = '< '
120. prev.style.float = 'right'
121. prev.style.cursor = 'pointer'
122. toolbar.appendChild(prev)
123.
124. prev.onclick =function(){
125. var month = calender.currentMonth.getMonth()
126. month--
127. calender.currentMonth.setMonth(month)
128. document.body.innerHTML = ''
129. calender.show()
130. }
131.
132. }
133. this.show = function(){
134. this.showCalenderMain()
135. this.showToobar()
136. this.showHeader()
137. this.getFirstDate()
138. this.showBody()
139. }
140. }
141.
142. var calender = new Calender()
143. calender.show()
第二种：
css：
1. *{
2. box-sizing: border-box;
3. user-select:none;
4. }
5. html,body{
6. height: 100%;
7. font-weight: bold;
8. font-family: 宋体;
9. }
10. section{
11. width: 450px;
12. height: 350px;
13. background-color: red;
14. padding: 18px;
15. }
16. header{
17. height: 50px;
18. width: 100%;
19. color: white;
20. font-size: 25px;
21. display: flex;
22. justify-content: space-between;
23. }
24. .currentDay {
25. color: blue;
26. }
27. .currentMonth {
28. color: white;
29. }
30. .otherMonth{
31. color: #837F7D;
32. }
33. .calendar-table{
34. width: 100%;
35. border-collapse: collapse;
36. color: white;
37. text-align:center;
38. }
39. tr{
40. height: 35px;
41. line-height: 35px;
42. }
43. header>div>span:hover{
44. cursor: pointer;
45. }
HTML:
1. <section>
2. <header>
3. <div id="date-title"></div>
4. <div>
5. <span id="left"><</span>　
6. <span id="right">></span>
7. </div>
8. </header>
9. <main></main>
10. </section>
JavaScript：
1. var dateObj = (function(){
2. var date = new Date()
3. return {
4. getDate:function(){
5. return date
6. },
7. setDate:function(date1){
8. date = date1
9. }
10. }
11. })()
12. function table(){
13. var dateMain = document.querySelector('main')
14. var tableTitle = "<tr>" +
15. "<th>日</th>" +
16. "<th>一</th>" +
17. "<th>二</th>" +
18. "<th>三</th>" +
19. "<th>四</th>" +
20. "<th>五</th>" +
21. "<th>六</th>" +
22. "</tr>"
23.
24. var tableBody = ''
25. for(var i = 0;i < 6;i++){
26. tableBody += "<tr>" +
27. "<td></td>" +
28. "<td></td>" +
29. "<td></td>" +
30. "<td></td>" +
31. "<td></td>" +
32. "<td></td>" +
33. "<td></td>" +
34. "</tr>"
35. }
36. dateMain.innerHTML = "<table id='calendarTable' class='calendar-table'>" + tableTitle + tableBody + "</table>"
37. }
38. table()
39. function showDate(){
40. var yy = dateObj.getDate().getFullYear()
41. var mm = dateObj.getDate().getMonth() + 1;
42. var dateTitle = document.querySelector('#date-title')
43. dateTitle.innerText = yy + '年' + mm + '月'
44.
45. var table = document.getElementById("calendarTable")
46. var tds = table.getElementsByTagName('td')
47. var firstDay = new Date(yy,mm - 1,1)
48.
49. for(var i = 0;i < tds.length;i++){
50. var thisDay = new Date(yy,mm - 1,i + 1 - firstDay.getDay())
51.
52. var thisDayStr = getDateStr(thisDay);
53.
54. tds[i].innerText = thisDay.getDate()
55.
56. if(thisDayStr == getDateStr(new Date())) {
57. tds[i].className = 'currentDay';
58. }else if(thisDayStr.substr(0, 6) == getDateStr(firstDay).substr(0, 6)) {
59. tds[i].className = 'currentMonth';
60. }else {
61. tds[i].className = 'otherMonth';
62. }
63. }
64. }
65. showDate()
66.
67. var left = document.getElementById("left");
68. var right = document.getElementById("right");
69.
70. left.addEventListener('click',function(){
71. var date = dateObj.getDate();
72. dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
73. showDate();
74. })
75.
76. right.addEventListener('click',function(){
77. var date = dateObj.getDate();
78. dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
79. showDate();
80. })
81.
82.
83. function getDateStr(date) {
84. var yy = date.getFullYear();
85. var mm = date.getMonth() + 1;
86. var dd = date.getDate();
87.
88. mm = (mm > 9) ? ("" + mm) : ("0" + mm);
89. dd = (dd > 9) ? ("" + dd) : ("0" + dd);
90.
91. return yy + mm + dd;
92. }
演示效果：
第一种、第二种