<!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;"> <!-- 这里将插入字符串timestr的html形式 --> </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>
JQuery实现日历
猜你喜欢
转载自blog.csdn.net/ws1995_java/article/details/80929170
今日推荐
周排行