【仿携程JQuery日期价格表】
今天比较闲所以就花点时间又写了点东西。
相信这种价格表大家不会陌生
现在我就模仿它做一个简单版本的。效果如下
首先需要两个时间控件，我这里用的是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>
