今天比较闲所以就花点时间又写了点东西。

相信这种价格表大家不会陌生

现在我就模仿它做一个简单版本的。效果如下

首先需要两个时间控件，我这里用的是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日期价格表】的更多相关文章

  1. Android 仿携程活动列表边框布局

    实现如下图所示的一个页面布局 布局框架 思路讲解: 1.一开始的思路是使用android提供的画布将布局中的内容花下来,之后想了想觉得比较麻烦,所以又开启了另外一条思路. 2.如上图“布局框架”所示. ...

  2. 微信小程序体验(1)：携程酒店机票火车票

    在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...

  3. 携程App的网络性能优化实践

    首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...

  4. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  5. 实现携程X分钟前有人预定功能

    实现携程X分钟前有人预定功能 原理:利用cookie与计时器两部分: 首先,进入页面,x会被随机数赋值,赋值后x会一分钟加1,直到加到60,再从1开始累加. 页面是否相同是根据页面的url后的id值判 ...

  6. 今天携程出事了：让我们来学习下http的响应码

    就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...

  7. 携程Ctrip DAL的学习 2

    携程Ctrip DAL的学习 2 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). 代码生成器的使用 详见 官网使用说明 注意的地方: 1 ...

  8. 携程Ctrip DAL的学习1

    携程Ctrip DAL的学习 1 本人net开发菜鸟,原理请自行看github的官网源码. 我这里是简单的使用(helloworld的水平). Ctrip DAL是携程框架部开发的数据库访问框架,支持 ...

  9. OpenStack虚拟云桌面在携程呼叫中心的应用

    编者:本文为刘科在第六期[携程技术微分享]中的分享内容.在携程技术中心(微信号ctriptech)微信后台回复[云桌面],可加入微信交流群,和关注云桌面的小伙伴一起玩耍~ 刘科,携程系统研发云平台桌面 ...

随机推荐

  1. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  2. careercup-中等难题 17.2

    17.2 设计一个算法,判断玩家是否赢了井字游戏. 解法: 假设这个检查某人是否赢得了井字游戏的函数为HasWon,那么我们第一步要向面试官确认, 这个函数是只调用一次,还是要多次频繁调用.如果是多次 ...

  3. Jordan Lecture Note-4: Linear & Ridge Regression

    Linear & Ridge Regression 对于$n$个数据$\{(x_1,y_1),(x_2,y_2),\cdots,(x_n,y_n)\},x_i\in\mathbb{R}^d,y ...

  4. php动态调用方法_sux

    <form  action=""> <input type="hidden" name="mod" id="mo ...

  5. JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示

    一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...

  6. C#_delegate - Pair<T> 静态绑定

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. 使用 Eclipse 的 Navigator Link Helper 实现导航器与编辑器的关联

    概要 Link With Editor 是 Eclipse 内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource ...

  8. Android，使用Intent或Bundle传递参数，跳转页面。

    (1)使用Intent跳转页面: 第一个activity:MainActivity.java中: Intent myIntent = new Intent(); myIntent.putExtra(& ...

  9. GCD多线程

    GCD本质线程自动管理指令包 GCD优点: 1.GCD 本身自带有线程锁的效果,能通过推迟昂贵计算任务并在后台运行它们来改善应用的响应性能. 2.GCD 提供了更易于使用的并发模型(效果方面类似于对锁 ...

  10. Asp.Net 5使用第三方容器

    这几天在学习Asp.Net 5,现在文档以及博客之类的资料实在太少了,不看源码几乎举步维艰,好在全都是开源的,看看微软的代码也获益良多. 看到DependencyInjection的代码里除了默认的容 ...