Achieve results:
HTML part:
<table> <p>请选择月份:</p><input type="month" name="" id="xmonth"> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> </tr> <tr id="weekday"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>
CSS part:
table thead{height: 30px; width: 233px;margin: 0 auto;text-align: center;} input{width:233px;height: 30px; font-size: 20px; display: inline-block;} td{background-color: chartreuse; height: 30px; width: 30px; text-align: center; }
Javascript part:
var oxmonth = document.getElementById ( 'xmonth' ) var firstWeek = document.getElementById ( 'WEEKDAY' ) var Everyday document.getElementsByTagName = ( 'TD' ) function All () { for ( var I =. 7; I <49; I ++ ) { document.getElementsByTagName ( 'TD') [I] = .innerHTML '' } // first thing clear all mounted dates lattice var D = new new a date (oxmonth.value) // Get the selected month time information D the console.log (D) var DAY1 = d.getDay () // Get the selected month is the first day of the week the console.log (DAY1); firstWeek.getElementsByTagName ( 'TD') [DAY1] .innerHTML = '. 1' Everyday [DAY1 + +. 7. 1] .innerHTML = '2' // Get the last day date: var month the = d.getMonth () var fullYear = d.getFullYear () var D1 = new new a date (fullYear, month the + 1,0 ) the console.log (D1); var LASTDAY = D1. getDate () the console.log (LASTDAY); // fills in addition to the position corresponding to other than the first day of the date for ( var DAY1. 7 = + + J. 1; J <LASTDAY + + DAY1. 7; J ++ ) { Everyday [J] .innerHTML = J-day1-6 } } // every second refresh the setInterval (All, 1000 )