js年历效果 JavaScript实现年历效果

时间:2021-08-25 layroy 人气:0

想了解JavaScript实现年历效果的相关内容吗，layroy在本文为您仔细讲解js年历效果的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,年历，下面大家一起来学习吧。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>制作年历</title>
  <style>
   body{text-align:center;}
   .box{margin:0 auto;width:880px;}
   .title{background: #ccc;}
   table{height:200px;width:200px;font-size:12px;text-align:center;float:left;margin:10px;font-family:arial;}
  </style>
  <script src="calendar.js"></script>
  <script>
   var year = parseInt(prompt('输入年份：','2019'));//制作弹窗
   document.write(calendar(year));//调用函数生成指定年份的年历
  </script>
 </head>
 <body>
 </body>
</html>

calendar.js

function calendar(y){
 //获取指定年份1月1日的星期数值
 var w = new Date(y,0).getDay();
 var html = '<div class="box">';
 
 //拼接每个月份的表格
 for(m=1;m<=12;m++){
  html += '<table>';
  html += '<tr class="title"><th colspan="7">' + y + '年' +m+' 月</th></tr>';
  html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'
  
  //获取每个月份共有多少天
  var max = new Date(y,m,0).getDate();
  
  html += '<tr>';//开始<tr>标签
  for (d=1;d<=max;d++){
   if(w && d== 1){//如果该月的第1天不是星期日，则填充空白
    html += '<td colspan ="' + w + '"> </td>';
   }
   html += '<td>' +d+ '</td>';
   if(w == 6 && d != max){//如果星期六不是该月的最后一天，则换行
    html += '</tr><tr>';
   }else if(d==max){//该月的最后一天，闭合</tr>标签
    html += '</tr>';
   }
   w = (w+1>6) ? 0 : w+1;
  }
  html += '</table>';
 }
 html += '</div>';
 return html;
}

效果

加载全部内容