【仿携程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)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...

随机推荐

Nape的回调系统 nape.callbacks
在Nape中增加一个回调大致分为三步 1:定义一些标签,并根据需求为不同的Interactor打上不同的标签 2:定义一个监听器,这个监听器定义了哪些标签触发了哪种行为之后做何种回调 3:为Space ...
Eclipse安装ADT失败解决办法
Eclipse的版本是3.5.2,配置Android的开发环境时遇到问题…… 按照Android官方文档一步步安装,到了安装Eclipse的ADT插件时,提示“requires 'org.eclips ...
android121 zhihuibeijing SlidingMenu(侧边栏效果,使用开源库)
## Splash ## - 旋转 RotateAnimation - 缩放 ScaleAnimation - 渐变 AlphaAnimation 工程可以作为一个库被其他工程当成一个Library使 ...
android Popupwindow 的一个demo源码
一直想用一下PopupWindow,就是苦于没有demo,自己去研究有太懒,刚好最近研究推送,下载了一个腾讯信鸽的demo,里面用到了一个PopupWindow,效果还不错,弄下来记录一下: 1.核心 ...
【转】cocos2d-x 2.0版本自适应屏幕分辨率
http://codingnow.cn/cocos2d-x/975.html 我使用的版本是cocos2d-2.0-x-2.0.4,cocos2dx-2.0版本对多分辨率适配提供了很好的支持,使用起来 ...
HDU 4259 - Double Dealing（求循环节）
首先将扑克牌进行一次置换,然后分解出所有的循环节,所有循环节的扑克牌个数的最小公倍数即为答案 #include <stdio.h> #include <string.h> #i ...
Templates
Templates Templates are the site's markup, where images and js, css files are located as well as the ...
Android_Menu_PopupMenu
layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...
DHCP 服务器
简介: DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作,主要用途:给内部网络或网络服务供应商自动分配 I ...
win7为鼠标右键添加“用Photoshop编辑”选项
1. 确认你注册表编辑器下,HKEY_CLASSES_ROOT\Applications\Photoshop.exe下的shell下的open下的command的右侧默认键值为 "D:\Ad ...

【仿携程JQuery日期价格表】

【仿携程JQuery日期价格表】的更多相关文章

随机推荐

热门专题