To prepare a simple calendar with JS

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 )
            

 

Guess you like

Origin www.cnblogs.com/wangbingblog/p/11431430.html