【仿携程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>
【仿携程JQuery日期价格表】的更多相关文章
- Android 仿携程活动列表边框布局
实现如下图所示的一个页面布局 布局框架 思路讲解: 1.一开始的思路是使用android提供的画布将布局中的内容花下来,之后想了想觉得比较麻烦,所以又开启了另外一条思路. 2.如上图“布局框架”所示. ...
- 微信小程序体验(1)：携程酒店机票火车票
在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...
- 携程App的网络性能优化实践
首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- 实现携程X分钟前有人预定功能
实现携程X分钟前有人预定功能 原理:利用cookie与计时器两部分: 首先,进入页面,x会被随机数赋值,赋值后x会一分钟加1,直到加到60,再从1开始累加. 页面是否相同是根据页面的url后的id值判 ...
- 今天携程出事了：让我们来学习下http的响应码
就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...
- 携程Ctrip DAL的学习 2
携程Ctrip DAL的学习 2 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). 代码生成器的使用 详见 官网使用说明 注意的地方: 1 ...
- 携程Ctrip DAL的学习1
携程Ctrip DAL的学习 1 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). Ctrip DAL是携程框架部开发的数据库访问框架,支持 ...
- OpenStack虚拟云桌面在携程呼叫中心的应用
编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...
随机推荐
- HDU 1718 Rank counting sort解法
本题是利用counting sort的思想去解题. 注意本题,好像利用直接排序,然后查找rank是会直接被判WA的.奇怪的推断系统. 由于分数值的范围是0到100,很小,而student 号码又很大, ...
- 在LiteIDE 中增加build 的参数
问题: go build 时候其实可以带参数的,但是我们直接运行liteIDE 就找不到 特别对于 Walk 这个gui 需要 -ldflags="-H windowsgui" 把 ...
- [React] Higher Order Components (replaces Mixins)
Higher order components will allow you to apply behaviors to multiple React components. So the idea ...
- android报错及解决2--Sdcard进行文件的读写操作报的异常
报错描述: 对Sdcard进行文件的读写操作的时候,报java.io.FileNotFoundException: /sdcard/testsd.txt (Permission denied),在往S ...
- air 中的 LocalStore
<ignore_js_op> 在AIR客户端程序中有时需要将用户的一些信息保存在本地,如果信息没有涉及到隐私那么一般用SharedObject类即可将数据存储在本地.由于SharedObj ...
- Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色
自从IOS7后UINavigationBar的一些属性的行为发生了变化.你可以在下图看到: 现在,如果你要修改它们的颜色,用下面的代码: self.navigationController.navig ...
- Android_gridView_LIstener_examle
layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
- Programme skills
1. Dynamic library 2. Template class. function template<typename T> classs Sample { ... templa ...
- malloc函数的底层实现你是否清楚
malloc函数的底层实现你是否清楚 说起malloc函数,每个人都能说出它的功能,而且我们经常会用到,那么今天我要说的是关于malloc函数在编译器的底层实现,如果你对它的实现已经很清楚了,那么你可 ...
- 计算openlayers两点之间的距离
distanceTo: function(point) { var distance = 0.0; if ((this.x != null) && (this.y != null) & ...