51dev.com IT技术开发者社区

51dev.com 技术开发者社区

javascript制作一个简单的日历

IT猿阅读(44)2019-10-27 收藏0次评论

实现效果:

 

HTML部分:


 

请选择月份:

 

             
             
             
             
             
             

CSS部分:

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 部分:

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 =''
                } //第一件事,清空所有的装日期的格子

                var d = new Date(oxmonth.value)
                //获取选中的月份的时间信息d
            console.log(d)

            var day1 = d.getDay()   //获取选中月份的第一天是星期几
            console.log(day1);
                firstWeek.getElementsByTagName('td')[day1].innerHTML ='1'
                everyday[day1+7+1].innerHTML ='2'

                //获取最后一天的日期:

                var month = d.getMonth()
                var fullyear = d.getFullYear()
                var d1 = new Date(fullyear,month+1,0)
                console.log(d1);
                var lastday = d1.getDate()
                console.log(lastday);
                
                //将除了第一天以外的其他日期填写到对应的位置
                for(var j = day1+7+1;j

 

以上就是javascript制作一个简单的日历的全部内容。

相关内容