很粗劣，适合新手看吧，总来思想就是类似java动态日历

很多是美化

script 写在div里，
 /* 
     `   是 键盘  ESC 下面的  ~   另外一个符号   
       ` ` :键盘上1前面的符号
      用 ` ` 括起来的html代码在使用元素进行表示的时候，可以将${值}输出    将获取到的没一天写在这个class名为   item  的小盒子里
     document.write(`<div class="item">${i}</div>`);
   */    
     （适合新手观看哈，欢迎留言）
<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>获取到本月的日历</title>
         <style type="text/css">
             .calender{
                 //定位
                 position: absolute;
                 width: 714px;
                 height: 510px;
                 left: 50%;
                 top: 50%;
                 //外边距
                 margin: -350px 0 0 -350px;
                 background-color: black;
             }
             
             .item{
                             position: relative;
                             top: -9%;
                             /* 
                              inline（行内元素）:
                              使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
                              不能更改元素的height，width的值，大小由内容撑开. 
                              可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
                              
                              block（块级元素）:
                              使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
                              能够改变元素的height，width的值. 
                              可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
                              
                               inline-block（融合行内于块级）:
                              结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
                              用通俗的话讲，就是不独占一行的块级元素
                              */
                             display: inline-block;
                             width: 100px;
                             height: 100px;
                             line-height: 100px;
                             text-align: center;
                             background:rgba(112,128,144,0.4);
                             color: #FFFFFF;
                             border: 1px solid rgba(255,255,255,0.4);
                             /* 所有的边向外进行扩大,经过0.5s之后完成效果 */
                             transition: all .5s;
                         }
             /* 鼠标放上去时，变化颜色，大小 */
             .item:hover{
                 background: rgba(112,128,144,0.7);
                 /* 扩大为原来的1.1倍 */
                 transform: scale(1.1);
             }
             
         </style>
     </head>
     <body>
         <div class="calender">
         
         <script type="text/javascript">
             var nowDate = new Date();
             console.info(nowDate);
             /* 获取到年 */
             var year = nowDate.getFullYear();
             console.info(year);
             var month = nowDate.getMonth() + 1;
             /* 获取到当前的月 */
             console.info(month);
             //从1900年1月1日，到当前的月份的上一个月的总天数
             var totalDay = 0;
             //目标月份(当前月份)的总天数
             var day = 0;
             //上面获取到的当前月份前面的空格数
             var space = 0;
             
             //统计整年的总天数
             for(var i = 1900;i < year;i++){
                 totalDay += (i % 4 == 0 && i % 100 != 0 || i % 400 == 0 ? 366 : 365)
             }
             console.info(totalDay);
             
             //统计整月的总天数
             for(var i = 1;i < month;i++){
                 switch(i){
                     case 4 :
                     case 6 :
                     case 9 :
                     case 11:
                     totalDay += 30;
                     case 1 :
                     case 3 :
                     case 5 :
                     case 7 :
                     case 8 :
                     case 10:
                     case 12:
                     totalDay += 31;
                     case 2 :
                     if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                         totalDay += 29;
                     }else{
                         totalDay += 28;
                     }
                     break;
                 }
             }
             console.info(totalDay);
             //计算空格数
             space = totalDay % 7;
             //获取目标月份的总天数
             switch(month){
                 case 4 :
                 case 6 :
                 case 9 :
                 case 11:
                 day += 30;
                 break;
                 case 1 :
                 case 3 :
                 case 5 :
                 case 7 :
                 case 8 :
                 case 10:
                 case 12:
                 day += 31;
                 break;
                 case 2 :
                 if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
                     day += 29;
                 }else{
                     day += 28;
                 }
                 break;
             }
             console.info(day);
             // 设置计数器
             var count = 0;
             //打印空格
             for(var i = 0;i < space; i++){
                 count++;//记数打了几个空格
                 /* 这里是王页面中写代码 */
                 /* 代码以字符串的形式传入进去 */
                 /* visibility:hidden:这里设置元素是否隐藏，元素隐藏的同时占用元素的位置 
                    display:none  隐藏元素，但是不占用元素的位置
                 */
                 document.write('<div class="item" style = "visibility: hidden;"></div>');
                 for(var i = 1;i <= day;i++){
                     count++;
                     /* 
                        ` ` :键盘上1前面的符号
                         用 ` ` 括起来的html代码在使用元素进行表示的时候，可以将${值}输出
                      */
                     document.write(`<div class="item">${i}</div>`);
                     if(count == 7){
                         document.write('<br>');
                         count = 0;
                     }
                 }
             }
             //打印元素
         </script>
         </div>
     </body>
 </html>

这个是效果图

javascript创建日历 javascript编写日历_javascript