【仿攜程JQuery日期價格表】

来源:http://www.cnblogs.com/leitong/archive/2016/05/31/5546310.html
-Advertisement-
Play Games

今天比較閑所以就花點時間又寫了點東西。 相信這種價格表大家不會陌生 現在我就模仿它做一個簡單版本的。效果如下 首先需要兩個時間控制項，我這裡用的是HTML5裡面的時間控制項,這個沒限制喜歡用什麼就用什麼 直接上代碼吧！我都寫了註釋。 ...


今天比較閑所以就花點時間又寫了點東西。

相信這種價格表大家不會陌生

現在我就模仿它做一個簡單版本的。效果如下

首先需要兩個時間控制項，我這裡用的是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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • git在分支上創建目錄和文件
    創建一個空目錄，在其中初始化git git init 創建一個新文件，此時預設在master分支上 touch file1.txt add到staging area git add file1.txt 提交變化 git commit m 'the first commit' 創建一個新的分支 git ...
  • node exports和module.exports區別
    我們只需知道三點即可知道 exports 和 module.exports 的區別了： 所以： 我們通過 var name ='nswbmw'; exports.name = name; exports.sayName =function(){ console.log(name); } 給 expo ...
  • 聊一聊HTML <!--…-->標簽
    定義 註釋標簽用於在html源代碼中插入註釋。註釋不會在瀏覽器上顯示。 用法 根據定義的基本用法，代碼如下 瀏覽器的支持情況 所有瀏覽器都支持上面這些只是最簡單的定義和使用方法。對於註釋的使用，有哪些更高級的使用。 高級應用 1、分配工作 2、說明功能模塊及使用方法 3、對於頁面製作的備註 以上3種 ...
  • CSS Sprite 雪碧圖製作
    CSS Sprite 雪碧圖，簡單來說就是： 為了提高網頁的性能，減少載入次數，將一些不會經常隨網站內容變化的小圖標，集中放在一張大圖上，將該圖應作為background-image 嵌入頁面中，在需要相關圖標時，根據background-position設置坐標值，達到目的。 一個例子，可以複製然 ...
  • jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器
    選擇器是jQuery的根基，在jQuery中，對事件處理、遍歷DOM和Ajax操作都依賴於選擇器。因此，如果能熟練的使用選擇器，不僅能簡化代碼，而且可以達到事半功倍的效果。jQuery選擇器完全繼承了CSS的風格。利用jQuery選擇器，可以非常便捷的找出特定的DOM元素，然後為它們添加相應的行為， ...
  • 編寫可維護的CSS
    在參與規模龐大、歷時漫長且參與人數眾多的項目時，所有開發者遵守如下規則極為重要： 保持 CSS 便於維護 保持代碼清晰易懂 保持代碼的可拓展性 為了實現這一目標，我們要採用諸多方法。 本文檔第一部分將探討語法、格式以及分析 CSS 結構；第二部分將圍繞方法論、思維框架以及編寫與規劃 CSS 的態度。 ...
  • 底部懸浮通欄可以關閉廣告位詳解（一）
    效果一： 1.首先，整個底部懸浮通欄廣告是固定在瀏覽器的底部，隨著瀏覽器的滾動，底部懸浮廣告始終在瀏覽器視窗中。這裡有幾個關鍵點：通欄，固定，黑色。 所以:首先我們必須給懸浮通欄廣告整體一個100%的寬度，其次給它設定固定定位，固定在瀏覽器底部，背景色為黑色，透明度為0.7。 2. 底部懸浮通欄廣告 ...
  • h5調用攝像頭
    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>GetUserMedia實例</title></head><body> <video id="video" autoplay><ideo></body><sc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類