结合CSS、HTML、JS设计日历，大神来帮帮小白啊！！！

如图所示，打要实现开窗口，弹出一个框，要求你输入年份。输入年份后，会展示当年12个月的日历。以下是CSS代码 和其中一个月代码。要求使用函数来实现。谢谢大大佬啦！！
 <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>
  </head>
  <body>
  
  
  <div class="box">
  
  <table>
  
<tr class="title"><th colspan="7">2018 年 1 月</th></tr>
<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>
<tr><td colspan="1"> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
<tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
<tr><td>28</td><td>29</td><td>30</td><td>31</td></tr>
  
  </table>

解决方案 »

  1.   

    日历涉及的东西比较广， 如果是自己搞着完，先还是去看看别人的代码(http://www.jq22.com/jquery-info6125)吧。 如果是在项目里， 还是用已有的日历控件。自己改改样式就好了。
      

  2.   

    不知道，前段时间，我们用的php实现
      

  3.   

    做了一个简单的，纯展示，没交互<!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>
    </head>
    <body>
    <div class="box"></div>
    </body>
    <script type="text/javascript">
    var year = parseInt(prompt("请输入年份："), 10) || new Date().getFullYear();
    var month = [31,28,31,30,31,30,31,31,30,31,30,31];
    var day = [];
    var temp = '<table><tr class="title"><th colspan="7">{y} 年 {m} 月</th></tr><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>{tr}</table>'document.querySelector(".box").innerHTML = calendar(year);function calendar(y){
    var arr = [];
    for(var i = 0; i < 31; i++){
    day.push(i + 1);
    }
    month[1] = ((y % 4)==0) && ((y % 100)!=0) || ((y % 400)==0) ? 29 : 28;
    for(var i = 1; i <= 12; i++){
    arr.push(create(y, i));
    }
    return arr.join('');
    }
    function create(y, m){
    var str = temp.replace('{y}', y).replace('{m}', m);
    var date = new Date(y, m - 1, 1);
    var arr = [], tr = [];
    arr = arr.concat(new Array(date.getDay()), day.slice(0, month[m - 1]));
    arr = arr.concat(new Array(arr.length % 7));
    for(var i = 0; i < arr.length; i += 7){
    tr.push("<tr><td>" + arr.slice(i, i + 7).join("</td><td>") + "</td></tr>");
    }
    return str.replace('{tr}', tr.join(''));
    }
    </script>
    </html>