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

随机推荐

node.js在windows下的学习笔记(7)---express的app.js的详细配置说明
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon') ...
基于Android 平台简易即时通讯的研究与设计[转]
摘要:论文简单介绍Android 平台的特性,主要阐述了基于Android 平台简易即时通讯(IM)的作用和功能以及实现方法.(复杂的通讯如引入视频音频等可以考虑AnyChat SDK~)关键词:An ...
Android Service 服务（一）—— Service .
http://blog.csdn.net/ithomer/article/details/7364024 一. Service简介 Service是android 系统中的四大组件之一(Activit ...
IT软件开发书籍汇总
数据库: MYSQL -> Effective MySQL 之 SQL 语句最优化 [美] Ronald Bradford 著李雪锋译清华大学出版社开发书籍 PHP核心技术与最佳实 ...
velocity properties
resource.loader=webapp webapp.resource.loader.class=org.apache.velocity.tools.view.servlet.WebappLoa ...
Encryption
Encryption Configuration Basic Usage Encrypting a value Decrypting a value Configuration Before usin ...
Database and models
Database and models The database Now that we have the Album module set up with controller action met ...
Intent的介绍
一.Intent的介绍 Intent的中文意思是“意图,意向”,在Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描 ...
android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
JAVA_HttpClientUtils
package org.mobiletrain.utils; import java.io.BufferedInputStream; import java.io.BufferedOutputStre ...

【仿携程JQuery日期价格表】

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

随机推荐

热门专题