用jquery做日历

最新推荐文章于 2021-03-06 21:59:51 发布

翻译最新推荐文章于 2021-03-06 21:59:51 发布 · 1.3k 阅读

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>日历</title>
       <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
       <script type="text/javascript">
           function timehtml(yeargoal,monthgoal){
               //月末
               var time = new Date(yeargoal,monthgoal,0);
               //获得这个月由多少天
               console.log(time.getDate());
               var date = time.getDate();
               var time2 = new Date(yeargoal,monthgoal-1,1);
               //获得这个月的一号是星期几
               console.log(time2.getDay());
               var day = time2.getDay();

               //月
               console.log(time.getMonth()+1);
               var mon = time.getMonth()+1;
               //年
               console.log(time.getFullYear());
               var year = time.getFullYear();
               //行标签头
               var hangT = "<tr style='heigth:50px;border: solid 1px black'>";
               //空的td块
               var lieK = "<td style='width:50px;border: solid 1px black'></td>";

               var timestr = hangT;
               //日历表头
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"日"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"一"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"二"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"三"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"四"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"五"+"</td>";
               timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+"六"+"</td>";
               timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
               for(var i = 0;i<day;i++){
                   timestr = timestr+lieK;
               }
               for(var j = 1;j<=date;j++){
                   timestr = timestr+"<td style='width:50px;border: solid 1px black'>"+j+"</td>";
                   if(day==6){
                       timestr = timestr+"</tr><tr style='heigth:50px;border: solid 1px black'>";
                       day = -1;
                   }
                   day++;
               }
               if(day>0){
                   for(var i = day;i<=6;i++){
                       timestr = timestr+lieK;
                   }
               }
               timestr = timestr+"</tr>";
               return timestr;
           }

           $(document).ready(function(){
               $("#okay").click(function(){
                   var yeargoal = $("#ayear").attr("value");
                   var monthgoal = $("#bmonth").attr("value");
                   var str = timehtml(yeargoal,monthgoal);
                   $("table").html(str);
                   if(day==0){
                       $("tr:last").remove();
                   }
               });
           });
       </script>
   </head>
   <body>
       <table style="width:350px; height: 400px;border: solid 1px black;">
           
       </table>
       <select style="width: 80px;" id="ayear">
           <option value="2010">2010</option>
           <option value="2011">2011</option>
           <option value="2012">2012</option>
           <option value="2013">2013</option>
           <option value="2014">2014</option>
           <option value="2015">2015</option>
           <option value="2016">2016</option>
           <option value="2017">2017</option>
           <option value="2018">2018</option>
           <option value="2019">2019</option>
           <option value="2020">2020</option>
       </select>年
       <select style="width: 80px;" id="bmonth">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
           <option value="7">7</option>
           <option value="8">8</option>
           <option value="9">9</option>
           <option value="10">10</option>
           <option value="11">11</option>
           <option value="12">12</option>
       </select>月
       <button type="button" value="确认跳转" id="okay">确认跳转</button>
   </body>
</html>