『開源』擴展 JS 的 Date 處理函數

来源:https://www.cnblogs.com/shuxiaolong/archive/2018/08/16/Js_Date_TimeSpan.html
-Advertisement-
Play Games

本文 基於 JQuery 擴展了一些 JS日期函數,包括: > 字元串 轉 Date 對象 萬能函數(性能僅 10W次/s,函數有路徑優化,字元串越詭異 耗時越長) > Date 轉 字元串 格式化 > 兩個 Date 的差值 (返回的結果類似 C# TimeSpan 對象) ...


背景:

JS 有自己的 時間類型 Date  —— 但是,在某些情況下 這個對象似乎 不太好用。

本文 基於 JQuery 擴展了一些  JS日期函數,包括:

> 字元串 轉 Date 對象 萬能函數(性能僅 10W次/s,函數有路徑優化,字元串越詭異 耗時越長)

> Date 轉 字元串 格式化

> 兩個 Date 的差值 (返回的結果類似 C# TimeSpan 對象)

 

一言不合,直接上代碼:

 1 /*感謝 InkFx (C) http://www.ink-fx.com 為 以下日期函數 作出的努力 */
 2 jQuery = window.jQuery || { };
 3 
 4 (function($) {
 5 
 6 
 7     /*--數據類型轉換函數 Start----------------------------------*/
 8 
 9     $.isArray = function(obj) {var result = false;try {result = Object.prototype.toString.apply(obj) === '[object Array]';if (result) return true;} catch(e) {}try {result = obj.constructor === Array;if (result) return true;} catch(e) {}return false;};
10     $.toInt = function(obj, dft) {try {dft = (typeof dft === 'number') ? dft : 0;} catch(e) {dft = 0;}try {if (obj == null) return dft;if (typeof obj === 'number') return parseInt(obj);var match = obj.toString().toLowerCase().match(/-*[0123456789abcdefx.]+/);var str = match == null || match.length <= 0 ? null : match[0];var result = null;if (str != null && str.length >= 2 && str.substr(0, 2) == "0x") {str = str.substr(2);result = parseInt(str, 16);} else {result = parseInt(str);}if (result == null || !isFinite(result)) return dft;return result;} catch(e) {return dft;}};
11     $.toFloat = function(obj, dft) {try {dft = (typeof dft === 'number') ? dft : 0;} catch(e) {dft = 0;}try {if (obj == null) return dft;if (typeof obj === 'number') return parseFloat(obj);var match = obj.toString().toLowerCase().match(/-*[0123456789abcdefx.]+/);var str = match == null || match.length <= 0 ? null : match[0];var result = null;if (str != null && str.length >= 2 && str.substr(0, 2) == "0x") {str = str.substr(2);result = parseFloat(parseInt(str, 16));} else {result = parseFloat(str);}if (result == null || !isFinite(result)) return dft;return result;} catch(e) {return dft;}};
12     $.toString = function(obj, dft) {try {dft = (typeof dft === 'string') ? dft : '';} catch(e) {dft = '';}try {if (obj == null) return dft;if (typeof obj === 'string') return obj;return obj.toString();} catch(e) {return dft;}};
13     $.toDateTime = function(obj, dft) {try {dft = (dft instanceof Date) ? dft : new Date(1900, 00, 01);} catch(e) {dft = new Date(1900, 00, 01);}try {if (obj == null) return dft;if (obj instanceof Date) return obj;var result = parseDate(obj);if (result == null) return dft;return result;} catch(e) {return dft;}};
14     $.toBoolean = function(obj, dft) {try {dft = (typeof dft === 'boolean') ? dft : false;} catch(e) {dft = false;}try {if (obj == null) return dft;if (obj == true) return true;if (obj == false) return false;if ($.isArray(obj)) return obj.length >= 1;if (typeof obj === 'boolean') return obj.toString().toLowerCase() == "true";if (typeof obj === 'number') return parseFloat(obj) > 0;/*if (typeof obj === 'string') return parseFloat(obj) > 0;*/if (obj.toString().toLowerCase() == "t") return true;if (obj.toString().toLowerCase() == "true") return true;return false;} catch(e) {return dft;}};
15 
16 
17     /*--數據類型轉換函數 End------------------------------------*/
18     
19 
20 
21     /*--時間相關函數 Start--------------------------------------*/
22 
23     $.formatDate = function(date, fmt) {try {date = $.toDateTime(date);fmt = fmt || "yyyy-MM-dd HH:mm:ss"; o = {"M+": date.getMonth() + 1,"d+": date.getDate(),"H+": date.getHours(),"h+": date.getHours() /*(date.getHours() > 12 ? (date.getHours() - 12) : date.getHours())*/,"m+": date.getMinutes(),"s+": date.getSeconds(),"q+": Math.floor((date.getMonth() + 3) / 3),"S": date.getMilliseconds(),"f+": date.getMilliseconds()};if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) {var padLeft = (k == "S" || k == "f+") ? "000" : "00";fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : (padLeft + o[k]).substr(("" + o[k]).length));}return fmt;} catch(e) { return ""; }};
24     $.isLeapYearDate = function(date) {try {date = $.toDateTime(date);return (0 == date.getFullYear() % 4 && ((date.getFullYear() % 100 != 0) || (date.getFullYear() % 400 == 0)));} catch(e) {return false;}};
25 
26     $.addYears = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var year = date.getFullYear();var month = date.getMonth();var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var millisecond = date.getMilliseconds();var result = new Date(year + num, month, day, hour, minute, second, millisecond);return result;} catch(e) { return new Date(1900, 01, 01); }};
27     $.addMonths = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var year = date.getFullYear();var month = date.getMonth();var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var millisecond = date.getMilliseconds();var addYear = (num + month) / 12;month = (num + month) % 12;var result = new Date(year + addYear, month, day, hour, minute, second, millisecond);return result;} catch(e) { return new Date(1900, 01, 01); }};
28     $.addDays = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var result = new Date(date.valueOf() + (num * 1000 * 60 * 60 * 24));return result;} catch(e) { return new Date(1900, 01, 01); }};
29     $.addHours = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var result = new Date(date.valueOf() + (num * 1000 * 60 * 60));return result;} catch(e) { return new Date(1900, 01, 01); }};
30     $.addMinutes = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var result = new Date(date.valueOf() + (num * 1000 * 60));return result;} catch(e) { return new Date(1900, 01, 01); }};
31     $.addSeconds = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var result = new Date(date.valueOf() + (num * 1000));return result;} catch(e) { return new Date(1900, 01, 01); }};
32     $.addMilliseconds = function(date, num) {try {date = $.toDateTime(date);num = $.toInt(num);var result = new Date(date.valueOf() + num);return result;} catch(e) { return new Date(1900, 01, 01); }};
33     $.getTimeSpan = function(date1, date2) {var timestamp = 0;if((date1 instanceof Date || date2 instanceof Date || date2 == null) || (date1 != null && date2 != null)) {date1 = $.toDateTime(date1);date2 = $.toDateTime(date2);timestamp = $.toFloat(date1 - date2);} else {timestamp = $.toInt(date1);}var temp = $.toInt(timestamp / 1000);var totalMilliSecond = timestamp;var totalSecond = timestamp / (1000);var totalMinute = timestamp / (1000 * 60);var totalHour = timestamp / (1000 * 60 * 60);var totalDay = timestamp / (1000 * 60 * 60 * 24);var milliSecond = $.toInt(totalMilliSecond) % 1000;var second = $.toInt(totalSecond) % 60;var minute = $.toInt(totalMinute) % 60;var hour = $.toInt(totalHour) % 24;var day = $.toInt(totalDay);return {TimeStamp: timestamp,Days: day,Hours: hour,Minutes: minute,Seconds: second,Milliseconds: milliSecond,TotalDays: totalDay,TotalHours: totalHour,TotalMinutes: totalMinute,TotalSeconds: totalSecond,TotalMilliseconds: totalMilliSecond,valueOf: function() { return this.TimeStamp; },toString: function() { return this.Days + "." + $.padLeft(this.Hours, 2, "0") + ":" + $.padLeft(this.Minutes, 2, "0") + ":" + $.padLeft(this.Seconds, 2, "0") + "." + $.padLeft(this.Milliseconds, 3, "0"); } };}
34 
35     /*--時間相關函數 End----------------------------------------*/
36 
37 
38 })(jQuery);
View Code

代碼比較長,當時我寫完之後,順手就把 JS壓縮了。

 

代碼調用如下:

            var begin = new Date();

            //執行15W次 自動識別轉換:

            //i3 CPU
            //Chrome: 5秒   平均: 30000次/s
            //IE 9  : 26秒  平均: 5770次/s
            //i5 CPU
            //Chrome: 14秒 20*100000次 平均: 107000次/s
            for (var i = 0; i < 10000; i++) {
                var result1 = $.toDateTime("2017-03-19 01:43:15 123453");
                var result2 = $.toDateTime("2017-03-19T01:43:15 123453");
                var result3 = $.toDateTime("2017-03-19");
                var result4 = $.toDateTime("2017/03/19 01:43:15");
                var result5 = $.toDateTime("03/19/2017 01:43:15");
                var result6 = $.toDateTime("03/19/2017 01:43");
                var result7 = $.toDateTime("01:43:15 123453");
                var result8 = $.toDateTime("01:43:15.123453");
                var result9 = $.toDateTime("01:43:15");
                var result10 = $.toDateTime("01:43");
                var result11 = $.toDateTime("2017/03/19");
                var result12 = $.toDateTime("03/19/2017");
                var result13 = $.toDateTime("Mon Mar 20 2017 02:46:06 GMT+0800 (中國標準時間)");
                var result14 = $.toDateTime("Mon Mar 20 02:46:06 UTC+0800 2017");
                var result15 = $.toDateTime("Mon Mar 20 2017 02:46:06");
                var result16 = $.toDateTime("2017年3月19日 01時43分15秒");
                var result17 = $.toDateTime("2017年03月19日01:43:15");
                var result18 = $.toDateTime("2017年03月19日 01:43");
                var result19 = $.toDateTime("2017年03月19日");
                var result20 = $.toDateTime("1時43分15秒");
            }

            var end = new Date();
            document.writeln(
                "計算 " + (i) + "*20次, 耗時:"
                + "<br/>" + begin.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/>" + end.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/>" + "計算結果: "
                + "<br/> $.toDateTime(\"2017-03-19 01:43:15 123453\") >> " + result1.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017-03-19T01:43:15 123453\") >> " + result2.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017-03-19\") >> " + result3.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017/03/19 01:43:15\") >> " + result4.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"03/19/2017 01:43:15\") >> " + result5.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"03/19/2017 01:43\") >> " + result6.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"01:43:15 123453\") >> " + result7.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"01:43:15.123453\") >> " + result8.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"01:43:15\") >> " + result9.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"01:43\") >> " + result10.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017/03/19\") >> " + result11.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"03/19/2017\") >> " + result12.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"Mon Mar 20 2017 02:46:06 GMT+0800 (中國標準時間)\") >> " + result13.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"Mon Mar 20 02:46:06 UTC+0800 2017\") >> " + result14.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"Mon Mar 20 2017 02:46:06\") >> " + result15.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017年3月19日 01時43分15秒\") >> " + result16.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017年03月19日01:43:15\") >> " + result17.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017年03月19日 01:43\") >> " + result18.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"2017年03月19日\") >> " + result19.format("yyyy-MM-dd HH:mm:ss fff")
                + "<br/> $.toDateTime(\"1時43分15秒\") >> " + result20.format("yyyy-MM-dd HH:mm:ss fff")
            );

 

上面的代碼中:

1 "Mon Mar 20 2017 02:46:06 GMT+0800 (中國標準時間)"
2 "Mon Mar 20 02:46:06 UTC+0800 2017"
3 "Mon Mar 20 2017 02:46:06"
4 
5 這三種,分別是 Chrome FireFox IE 的 Date 對象 toString() 的結果。
6 萬能函數 也已經進行了反向解析支持。

 

PS.
看客不禁哈哈大笑:“除非有BUG,否則這種 Date.toString() 的字元串 根本就不該出現在程式中。”

如果您覺得 這三種 字元串類型 不會出現。
—— 那我們看看 大名鼎鼎的 element-ui 庫中,DatePicker 控制項 是如何 鬧心的:

 

http://element-cn.eleme.io/1.4/#/zh-CN/component/date-picker

http://element-cn.eleme.io/2.4/#/zh-CN/component/date-picker (新版已經修正了BUG)

 

我們再來看看 各位網友是如何踩坑的:

https://www.cnblogs.com/Mrrabbit/p/7716552.html

https://blog.csdn.net/fabulous1111/article/details/79566624

https://blog.csdn.net/lyz571029230/article/details/77987835

—— 無一例外:控制項的值 不能直接獲取,只能通過 change 事件取值。

 

 

如何獲取時間差:

 1 var timeSpan = $.getTimeSpan("2017-03-27 21:20:05 000", "2017-03-25 10:10:10 000");
 2 alert(timeSpan); //日期比較 是可以直接使用 > < 的
 3 alert(timeSpan.TotalDays); //兩個時間相差的天數(有小數,比如 1.5天)
 4 alert(timeSpan.TotalHours); //兩個時間相差的小時數(有小數)
 5 alert(timeSpan.TotalMinutes); //兩個時間相差的分鐘數(有小數)
 6 alert(timeSpan.TotalSeconds); //兩個時間相差的秒數(有小數)
 7 alert(timeSpan.TotalMilliseconds); //兩個時間相差的毫秒數(有小數)
 8 
 9 
10 alert($.addYears("2017-03-27 21:20:05 123456", 5));  //在指定時間基礎上,增加 5 年
11 alert($.addMonths("2017-03-27 21:20:05 123456", 48));  //在指定時間基礎上,增加 48 月
12 alert($.addDays("2017-03-27 21:20:05 123456", 365));  //在指定時間基礎上,增加 365 天
13 alert($.addHours("2017-03-27 21:20:05 123456", 48));  //在指定時間基礎上,增加 48 消失
14 alert($.addMinutes("2017-03-27 21:20:05 123456", 120));  //在指定時間基礎上,增加 120分鐘
15 alert($.addSeconds("2017-03-27 21:20:05 123456", 480));  //在指定時間基礎上,增加 480秒
16 alert($.addMilliseconds("2017-03-27 21:20:05 123456", 10300));  //在指定時間基礎上,增加 10300毫秒

 

是的, JS 的 Date 對象, 好多你需要但是 底層不提供的 函數 —— 本文 都已經提供。

本文源碼,完全開源,才用 MIT 開源協議 —— 源碼可以用於 個人、商業,可以修改、添加、刪除,僅僅需要保留 作者的著作聲明。

 

 

源碼早在2017年完成,這次項目需要用到 TypeScript —— 於是,就將 之前的部分 底層Js代碼,進行了移植。

今天順帶踩了一下 element-ui 的坑,發文紀念一下 ~

 

 

                                   

                                                                                                                                                              InkFx

                                                                                                                                                          2018-08-16 

   

 


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

-Advertisement-
Play Games
更多相關文章
  • 11、強制轉換 強制轉換主要指使用Number、String和Boolean三個構造函數,手動將各種類型的值,轉換成數字、字元串或者布爾值。 1>Number強制轉換 參數為原始類型值的轉換規則: 原始類型的值主要是字元串、布爾值、undefined和null,它們都能被Number轉成數值或NaN ...
  • 4-1 渲染機制:-1-,什麼是DOCTYPE及其作用?DTD(document type definition,文檔類型定義)是一系列的語法規則,用來定義XML或(X)HTML的文件類型,瀏覽器會使用DTD來判斷文檔類型,決定使用何種協議來解析,以及切換瀏覽器模式。DOCTYPE就是用來聲明文檔類 ...
  • 什麼是職責鏈模式? 重要性:4 星,在項目中能對 if-else 語句進行優化 定義:避免請求發送者與接收者耦合在一起,讓多個對象都有可能接收請求,將這些對象連接成一條鏈,並且沿著這條鏈傳遞請求,直到有對象處理它為止。 主要解決:職責鏈上的處理者負責處理請求,客戶只需要將請求發送到職責鏈上即可,無須 ...
  • 一、背景 CSS有三大特性:層疊性、繼承性、優先順序。 而我們在給CSS定義樣式的時候,經常出現兩個及以上的規則應用在同一元素上,單該元素最終在瀏覽器呈現的效果是應用的哪個規則呢?這就要考慮優先順序的問題了。 CSS優先順序是由CSS權重來作為衡量標準的,權重的計算有一套計算公式,有如下規範: 使用一個4 ...
  • 每個第一次使用jq的開發者都感到驚嘆,jq的$太神奇了,究竟是怎麼做到的使用\$控制dom 贊嘆前人之餘,探究其本源才是前端開發者應該做的事,社區常常說,不要重覆造輪子, 可是啊,連輪子都造不出來,又怎麼去瞭解在什麼環境下用什麼輪子,怎麼樣才可以造成更加優秀的輪子, 不同階段對前端有不同的理解,作為 ...
  • ​ 在開始接觸JavaScript的時候,書上有一句話我記憶深刻, JavaScript是一門單線程語言 ,不管從什麼途徑去獲取這個消息,前端開發者都會記住,哦~~,JavaScript是一門單線程語言,所以alert()會卡住 ​ 為什麼JavaScript是一門單線程語言?因為什麼原因讓Java ...
  • 最基本的寫法 使用indexOf() 看起來性能還不錯的去除方法 假如只要排序的話 我們可以用一行代碼實現 ...
  • 1. jQuery函數的基本語法: $(document).ready(function(){ //代碼塊; }) 2.window.onload()和$(document).ready()的區分: 1)window.onload()它的執行時機是必須等待網頁中所有的內容載入完畢(包括圖片)才能執行 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...