今天比較閑所以就花點時間又寫了點東西。
相信這種價格表大家不會陌生
現在我就模仿它做一個簡單版本的。效果如下
首先需要兩個時間控件，我這里用的是HTML5里面的時間控件,這個沒限制喜歡用什么就用什么
直接上代碼吧！我都寫了注釋。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="../js/jquery-1.9.1.min.js"></script> <style> .div { width: 357px; min-height: 30px; border: 1px gray solid; border-right: 0px; } .div div { width: 50px; height: 30px; border-right: 1px gray solid; border-bottom: 1px gray solid; float: left; line-height: 30px; text-align: center; } .sdct_dateday { border-bottom: 1px #CCCCCC dashed; height: 30px; width: 358px; line-height: 30px; } .sdct_dateday div { width: 50px; height: 30px; float: left; text-align: center; } .sdct_dateday div span { color: #00A9EE; } .sdct_datedayborder { border-right: 1px #CCCCCC solid; border-left: 1px #CCCCCC solid; } #pricecontent { width:100%; } </style> </head> <body> <span>開始時間：</span> <input type="date" value="2016-05-31" id="startdate" /> <span>結束時間：</span> <input type="date" value="2016-06-10" id="enddate" /> <a href="javascript:void(0)">查看價格表</a> <div></div> </body> </html> <script> $(function () { var Pcd = new Object; //申明對象 $("a").mouseover(function () { var html = '<div><div class="div"><div>周日</div><div>周一</div><div>周二</div><div>周三</div><div>周四</div><div>周五</div><div>周六</div></div><div id="pricecontent"></div></div>'; $(this).next().append(html); //開始日期 var starttime = $("#startdate").val(); //結束日期 var endtime = $("#enddate").val(); //為了兼容火狐瀏覽器所以將日期拆分成年月日 var starttimeyear = starttime.substring(0, 4); var starttimemonth = starttime.substring(5, 7); var starttimeday = starttime.substring(8, 10); var endtimeyear = endtime.substring(0, 4); var endtimemonth = endtime.substring(5, 7); var endtimeday = endtime.substring(8, 10); //獲取時間段跨越幾個星期 var d1 = new Date(starttimeyear, starttimemonth - 1, starttimeday); var d2 = new Date(endtimeyear, endtimemonth - 1, endtimeday); var dn = (d2 - d1) / 24 / 60 / 60 / 1000; var day = Math.ceil((dn + d1.getDay()) / 7); var html = ""; var strBzdatetime = new Date(starttimeyear, starttimemonth - 1, starttimeday).getDay(); $("#pricecontent").children().remove(); //列表第一個日期 var fristdate = Pcd.dateOperator(starttime, strBzdatetime, "-"); //列表第一個日期的日 var fristday = fristdate.substring(fristdate.length - 2, fristdate.length); //列表最后一個日期 var lastdate = Pcd.dateOperator(endtime, new Date(endtimeyear, endtimemonth - 1, endtimeday).getDay(), "+"); //列表最后一個日期的日 var lastday = lastdate.substring(lastdate.length - 2, lastdate.length); //根據星期數循環列表 for (var i = 0; i < day; i++) { html += "<div class='sdct_dateday'>"; html += " </div>"; } $("#pricecontent").append(html); //循環添加表格 for (var i = 1; i < 8; i++) { if (i % 2 == 0) { $(".sdct_dateday").append("<div></div>"); } else { $(".sdct_dateday").append("<div class='sdct_datedayborder'></div>"); } } //如果列表第一天日期是開始日期的上一個月就選這個月的天數為上個月的天數否則就是開始日期的月天數 var NowMonthDay = ""; if (starttime.substring(5, 7) - fristdate.substring(5, 7) == 1) { NowMonthDay = Pcd.getDays(fristdate); } else { NowMonthDay = Pcd.getDays(starttime); } //循環添加日期 var j = 0; $.each($(".sdct_dateday").children("div"), function (i) { if (i <= NowMonthDay - fristday) { $(this).text(fristday + i); } else { j++; $(this).text(j); } }); //取得價格數組，循環顯示對應日期的價格(在這里我就用紅色背景替代了) var diffdays = Pcd.DateDiff(starttime, endtime);//開始日期、結束日期相差天數 //var pricearry = ""; //價格數組 for (var i = 0; i < diffdays + 1; i++) { for (var j = strBzdatetime - 1 ; j <= diffdays + 1 + strBzdatetime ; j++) { if (j - i == strBzdatetime) { $(".sdct_dateday").children("div").eq(j).css({ "background": "red" }) //這里可以添加價格到日期表中，價格的數量就相當於開始日期、結束日期相差天數 //$(".sdct_dateday").children("div").eq(j).text("價格"); } } } }).mouseout(function () { $(this).next().children().remove(); }); //日期加減運算 Pcd.dateOperator = function (date, days, operator) { date = date.replace(/-/g, "/"); //更改日期格式 var nd = new Date(date); nd = nd.valueOf(); if (operator == "+") { nd = nd + days * 24 * 60 * 60 * 1000; } else if (operator == "-") { nd = nd - days * 24 * 60 * 60 * 1000; } else { return false; } nd = new Date(nd); var y = nd.getFullYear(); var m = nd.getMonth() + 1; var d = nd.getDate(); if (m <= 9) m = "0" + m; if (d <= 9) d = "0" + d; var cdate = y + "-" + m + "-" + d; return cdate; } //獲取當前月有多少天 Pcd.getDays = function (date) { var year = date.substring(0, 4); //獲取當前月份 var mouth = date.substring(5, 7); //定義當月的天數； var days; //當月份為二月時，根據閏年還是非閏年判斷天數 if (mouth == 2) { days = year % 4 == 0 ? 29 : 28; } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) { //月份為：1,3,5,7,8,10,12 時，為大月.則天數為31； days = 31; } else { //其他月份，天數為：30. days = 30; } //輸出天數 return days; } //比較兩日期相差多少天 Pcd.DateDiff = function (sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式 var aDate, oDate1, oDate2, iDays aDate = sDate1.split("-") oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //轉換為12-18-2006格式 aDate = sDate2.split("-") oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒數轉換為天數 return iDays } }) </script>