專案常用JS方法封裝(二) [ 時間相關處理 ]

YXi發表於2019-12-14

持續更新中...

封裝方法傳送門：

使用方法非常簡單，只需放到你的 utils.js 工具檔案中，直接 export const 加上我的封裝方法，在別的檔案中使用{方法1,方法2,方法3...}引用後就可以直接使用了!

001.時間戳轉化成YMD格式

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

/*
*   timestamp 當前時間戳，毫秒
*   formats 時間格式，包括：
*               1. Y-m-d
*               2. Y-m-d H:i:s
*               3. Y年m月d日
*               4. Y年m月d日 H時i分s秒
*/

dateFormat = (timestamp, formats) => {
  formats = formats || 'Y-m-d';
  let zero = function (value) {
    if (value < 10) {
      return '0' + value;
    }
    return value;
  };
  let myDate = timestamp ? new Date(timestamp) : new Date();
  let year = myDate.getFullYear();
  let month = zero(myDate.getMonth() + 1);
  let day = zero(myDate.getDate());
  let hour = zero(myDate.getHours());
  let minite = zero(myDate.getMinutes());
  let second = zero(myDate.getSeconds());

  return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
    return ({
      Y: year,
      m: month,
      d: day,
      H: hour,
      i: minite,
      s: second
    })[matches];
  });
};

console.log(dateFormat(date,'Y-m-d'));
複製程式碼

002.年

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateY = time =>{
  let newDate = new Date(time);
  let {y}={y:newDate.getFullYear()};
  return `${y}`;
}

console.log(dateY(date));
複製程式碼

003.年月

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateYM = time => {
  let newDate = new Date(time);
  let { y, m, d } = { y: newDate.getFullYear(), m: newDate.getMonth() + 1, d: newDate.getDate() };
  return `${y}-${m}`;
}

console.log(dateYM(date));
複製程式碼

004.年月日

可根據自己需求，自己新增或刪除相應的時間

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateymd = time => {
  let newDate = new Date(time);
  let { y, m, d } = { y: newDate.getFullYear(), m: newDate.getMonth() + 1, d: newDate.getDate() };
  return `${y}-${m}-${d}`;
}

console.log(dateymd2(date));
複製程式碼

005.年月日時分秒

let date = Date.parse(new Date()) //  獲取當前時間戳(毫秒)

dateTime = time => {
  let newDate = new Date(time);
  let { y, M, d, h, m, s } = { y: newDate.getFullYear(), M: newDate.getMonth() + 1, d: newDate.getDate(), h: newDate.getHours(), m: newDate.getMinutes(), s: newDate.getSeconds() };
  return `${y}-${M}-${d}  ${h}:${m}:${s}`;
}

console.log(dateTime(date));
複製程式碼

006.計算時間N之前

time_filter = time => {
  time -= 0;
  let difTime = new Date().getTime() - time;
  let { h, m, s } = { h: parseInt(difTime / (3600 * 1000)), m: parseInt(difTime / (60 * 1000)), s: parseInt(difTime / 1000) };
  let msg = "";
  if (m < 1) {
    msg = `${s}秒前`
  } else if (m >= 1 && h < 1) {
    msg = `${m}分鐘前`;
  } else if (h >= 1 && h <= 24) {
    msg = `${h}小時前`;
  } else if (h > 24) {
    h = parseInt(h / 24)
    msg = `${h}天前`;
  }
  return msg;
}

//輸入一個時間戳，能計算出來是多長時間之前
console.log(time_filter(1584009520000));  //3分鐘前
複製程式碼

007.獲取上週本週下週時間

getDate = n => {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let date = now.getDate();
  let day = now.getDay();
  if (day !== 0) {
    n = n + (day - 1);
  } else {
    n = n + day;
  }
  if (day) {
    if (month > 1) {
      month = month;
    } else {
      year = year - 1;
      month = 12;
    }
  }
  now.setDate(now.getDate() - n);
  year = now.getFullYear();
  month = now.getMonth() + 1;
  date = now.getDate();
  let s =
    year +
    "-" +
    (month < 10 ? "0" + month : month) +
    "-" +
    (date < 10 ? "0" + date : date);
  return s;
}

/***引數都是以週一為基準的***/
//上週的開始時間
// console.log(getDate(7));
//上週的結束時間
// console.log(getDate(1));
//本週的開始時間
// console.log(getDate(0));
//本週的結束時間
// console.log(getDate(-6));
//下週的開始時間
// console.log(getDate(-7));
//下週結束時間
// console.log(getDate(-13));
複製程式碼

008.獲取當前時間(年月日)

getNowDate = () => {
  let nowdate = new Date();
  let y = nowdate.getFullYear();
  let m = nowdate.getMonth() + 1;
  let d = nowdate.getDate();
  return y + "-" + m + "-" + d;
}
複製程式碼

009.當前的時間(年月日時分秒)

getDateTime = () => {
  let date = new Date();
  year = date.getFullYear();
  month = date.getMonth() + 1;
  day = date.getDate();
  hour = date.getHours() + 1;
  minute = date.getMinutes();
  second = date.getSeconds();
  month = checkTime(month);
  day = checkTime(day);
  hour = checkTime(hour);
  minute = checkTime(minute);
  second = checkTime(second);
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }
  return "" + year + "年" + month + "月" + day + "日" + hour + "時" + minute + "分" + second + "秒"
}

console.log(getDateTime());
複製程式碼

010.倒數計時(開始結束重置,自定義時間)

以下程式碼寫到HTML的body中

<span id="clock">00:01:00:00</span>
<input id="start" type="button" value="開始" onclick="run()">
<input id="end" type="button" value="結束" onclick="stop()">
<input id="reset" type="button" value="重置" onclick="reset()">
<script language="Javascript">
    var normalelapse = 100;
    var nextelapse = normalelapse;
    var counter;
    var startTime;
    var start = clock.innerText;
    var defaultTime = clock.innerText;
    var finish = "00:00:00:00";
    var timer = null;

    // 開始執行  
    function run() {
        start.disabled = true;
        end.disabled = false;
        reset.disabled = false;
        counter = 0;
        // 初始化開始時間  
        startTime = new Date().valueOf();

        // nextelapse是定時時間, 初始時為100毫秒  
        // 注意setInterval函式: 時間逝去nextelapse(毫秒)後, onTimer才開始執行  
        timer = window.setInterval("onTimer()", nextelapse);
    }

    // 停止執行  
    function stop() {
        start.disabled = false;
        end.disabled = true;
        reset.disabled = true;
        window.clearTimeout(timer);
    }
    window.onload = function () {
        end.disabled = true;
    };

    // 重置時間
    function reset() {
        start.disabled = true;
        end.disabled = false;
        reset.disabled = false;
        window.clearTimeout(timer);
        clock.innerText = defaultTime
    }

    // 倒數計時函式  
    function onTimer() {
        if (start == finish) {
            window.clearInterval(timer);
            alert("時間到了!");
            return;
        }

        var hms = new String(start).split(":");
        var ms = new Number(hms[3]);
        var s = new Number(hms[2]);
        var m = new Number(hms[1]);
        var h = new Number(hms[0]);

        ms -= 10;
        if (ms < 0) {
            ms = 90;
            s -= 1;
            if (s < 0) {
                s = 59;
                m -= 1;
            }

            if (m < 0) {
                m = 59;
                h -= 1;
            }
        }

        var ms = ms < 10 ? ("0" + ms) : ms;
        var ss = s < 10 ? ("0" + s) : s;
        var sm = m < 10 ? ("0" + m) : m;
        var sh = h < 10 ? ("0" + h) : h;

        start = sh + ":" + sm + ":" + ss + ":" + ms;
        clock.innerText = start;

        // 清除上一次的定時器  
        window.clearInterval(timer);

        // 自校驗系統時間得到時間差, 並由此得到下次所啟動的新定時器的時間nextelapse  
        counter++;
        var counterSecs = counter * 100;
        var elapseSecs = new Date().valueOf() - startTime;
        var diffSecs = counterSecs - elapseSecs;
        nextelapse = normalelapse + diffSecs;
        if (nextelapse < 0) nextelapse = 0;
        // 啟動新的定時器  
        timer = window.setInterval("onTimer()", nextelapse);
    }  
</script>
複製程式碼

011.計時器(無開始結束)

以下程式碼寫到HTML的body中

<div id="time"></div>
<script type="text/javascript">
    var maxtime = 10 * 60; // 
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = "還有" + minutes + "分" + seconds + "秒";
            document.all["time"].innerHTML = msg;
            if (maxtime == 5 * 60) alert("僅剩5分鐘");
            --maxtime;
        } else {
            clearInterval(timer);
            alert("時間到!");
        }
    }
    timer = setInterval("CountDown()", 1000);   
</script>
複製程式碼

012.獲取最近一週(月),下一週(月)日期範圍

使用時要注意函式之間的相互引用和this指向問題

/*
 * @param dateNow :Date類
 * @param intervalDays ：間隔天數
 * @param bolPastTime  ：Boolean,判斷在引數date之前，還是之後，
 */
getDateRange = (dateNow, intervalDays, bolPastTime) => {
    let oneDayTime = 24 * 60 * 60 * 1000;
    let list = [];
    let lastDay;
    if (bolPastTime === true) {
        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
        list.push(formateDate(lastDay));
        list.push(formateDate(dateNow));
    } else {
        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
        list.push(formateDate(dateNow));
        list.push(formateDate(lastDay));
    }
    return list;
}
function formateDate (time) {
    let year = time.getFullYear()
    let month = time.getMonth() + 1
    let day = time.getDate()
    if (month < 10) {
        month = '0' + month
    }
    if (day < 10) {
        day = '0' + day
    }
    return year + '-' + month + '-' + day + ''
}

var date = new Date();
var list = getDateRange(date, 6, true)
console.log("獲取近一週日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[1]);

var list = getDateRange(date, 30, true)
console.log("獲取近一個月日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[1]);

var list = getDateRange(date, 0, true)
console.log("獲取今天日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[1]);

var list = getDateRange(date, 1, true)
console.log("獲取昨天日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[0]);

var list = getDateRange(date, 6, false)
console.log("獲取下一週日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[1]);

var list = getDateRange(date, 30, false)
console.log("獲取下一個月日期範圍：\n開始日期:" + list[0] + ";結束日期:" + list[1]);

/*
獲取近一週日期範圍：
開始日期:2019-12-04;結束日期:2019-12-10

獲取近一個月日期範圍：
開始日期:2019-11-10;結束日期:2019-12-10

獲取今天日期範圍：
開始日期:2019-12-10;結束日期:2019-12-10

獲取昨天日期範圍：
開始日期:2019-12-09;結束日期:2019-12-09

獲取下一週日期範圍：
開始日期:2019-12-10;結束日期:2019-12-16

獲取下一個月日期範圍：
開始日期:2019-12-10;結束日期:2020-01-09
*/
複製程式碼

013.字元替換(時間格式)

/*
*   str 表示將要替換的字串
*   l 表示你將要替換的字元
*   r 表示你想要替換的字元
*/
transFormat = (str, l, r) => {
    let reg = new RegExp(l, 'g') // g表示全部替換，預設替換第一個
    str = str.replace(reg, r)
    return str
}

console.log(transFormat('2019-12-13', '-', '/')); // 2019/12/13
console.log(transFormat('2019-12-13', '-', '')); // 20191213
複製程式碼

014.時間補零

如果獲取的時間是一位數，則補一個0

Appendzero = obj => {
    if (obj < 10 && obj.length < 2) return "0" + obj;
    else return obj;
}
複製程式碼

015.獲取當前時間半小時之前時間

getHalfHour = () => {
  let date = new Date(new Date().getTime() - 30 * 60 * 1000);
  let hh = date.getHours()
  let mm = date.getMinutes()
  let ss = date.getSeconds()
  return hh + ':' + mm + ':' + ss
}
複製程式碼

有可能我們在使用時間資料時，需要使用到的時間必須是兩位數，這時候，我們只需要使用上面的時間補零方法，就可以完美的解決了，如下：

getHalfHour = () => {
  let date = new Date(new Date().getTime() - 30 * 60 * 1000);
  let hh = Appendzero(date.getHours())
  let mm = Appendzero(date.getMinutes())
  let ss = Appendzero(date.getSeconds())
  return hh + ':' + mm + ':' + ss
}

function Appendzero(obj) {
  if (obj < 10) return "0" + obj;
  else return obj;
}
複製程式碼

下面緊接著的這兩種方法類似！！！

016.獲取當前時間1小時之前時間

getOneHour = () => {
  let date = new Date(new Date().getTime() - 1 * 60 * 60 * 1000);
  let hh = date.getHours()
  let mm = date.getMinutes()
  let ss = date.getSeconds()
  return hh + ':' + mm + ':' + ss
}
複製程式碼

017.獲取當前時間12小時之前時間

getHalfHour = () => {
  let date = new Date(new Date().getTime() - 30 * 60 * 1000);
  let hh = date.getHours()
  let mm = date.getMinutes()
  let ss = date.getSeconds()
  return hh + ':' + mm + ':' + ss
}
複製程式碼

018.數字前補零

/*
*   num為你想要進行填充的數字
*   length為你想要的數字長度
*/

//迭代方式實現
padding1=(num, length)=> {
  for(let len = (num + "").length; len < length; len = num.length) {
      num = "0" + num;            
  }
  return num;
}

//遞迴方式實現
padding2=(num, length) =>{
  if((num + "").length >= length) {
      return num;
  }
  return padding2("0" + num, length)
}

//轉為小數
padding3=(num, length)=> {
  let decimal = num / Math.pow(10, length);
  //toFixed指定保留幾位小數
  decimal = decimal.toFixed(length) + "";
  return decimal.substr(decimal.indexOf(".")+1);
}

//填充擷取法
padding4=(num, length)=> {
  //這裡用slice和substr均可
  return (Array(length).join("0") + num).slice(-length);
}

//填充擷取法
padding5=(num, length)=> {
  let len = (num + "").length;
  let diff = length+1 - len;
  if(diff > 0) {
      return Array(diff).join("0") + num;
  }
  return num;
}
複製程式碼

019.UTC轉換標準時間

utcToNorm = utcTime => {
  // 轉為正常的時間格式 年-月-日 時:分:秒
  let T_pos = utcTime.indexOf('T');
  let Z_pos = utcTime.indexOf('Z');
  let year_month_day = utcTime.substr(0, T_pos);
  let hour_minute_second = utcTime.substr(T_pos + 1, Z_pos - T_pos - 1);
  let newTime = year_month_day + " " + hour_minute_second;
  // 處理成為時間戳
  timeStamp = new Date(Date.parse(newTime));
  timeStamp = timeStamp.getTime();
  timeStamp = timeStamp / 1000;
  // 增加8個小時，北京時間比utc時間多八個時區
  timeStamp = timeStamp + 8 * 60 * 60;
  // 時間戳轉為時間
  let normTime = new Date(parseInt(timeStamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
  return normTime;
}

//  測試資料
let date = '2019-12-29T03:14:32.860Z'
//  let date = JSON.stringify(new Date())
console.log(utcToNorm(date));   // 2019-12-29 11:14:32
複製程式碼

020.計算兩個日期之間間隔幾天

/**
 *  strDateStart 開始時間 (String)
 *  strDateEnd 結束時間 (String)
 */
intervalDate = (strDateStart,strDateEnd) => {
    let strSeparator = "-"; //日期分隔符
    let oDate1;
    let oDate2;
    let iDays;
    oDate1= strDateStart.split(strSeparator);
    oDate2= strDateEnd.split(strSeparator);
    let strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
    let strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
    iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24);//把相差的毫秒數轉換為天數
    return iDays ;
}

//  測試資料
console.log(intervalDate('2020-1-3','2019-12-28'));   // 6
console.log(intervalDate('2020-01-03','2019-12-25'));   // 9
複製程式碼

021.計算兩個日期間隔幾天(通過時間戳計算)

/**
 *  startTime 開始時間 (時間戳-毫秒)
 *  endTime 結束時間 (時間戳-毫秒)
 */

intervalTimeStamp = (startTime,endTime) => {
  let stime = new Date(startTime).getTime();
  let etime = new Date(endTime).getTime();
  let intervalTime = etime - stime; 
  let intervalDay=Math.floor(intervalTime/(24*3600*1000));
  let interval = intervalDay;
  return interval;
}

//  測試資料
console.log(intervalTimeStamp(1577808000000,1577980800000));  // 2
複製程式碼

022.標準時間轉時間戳

let date = new Date('2020-03-12 18:00:00');

// 有三種方式轉化
let time1 = date.getTime();
let time2 = date.valueOf();
let time3 = Date.parse(date);

console.log(time1); //  1584007200000
console.log(time2); //  1584007200000
console.log(time3); //  1584007200000
複製程式碼

專案常用JS方法封裝(三) [ 字串相關處理 ]
2020-01-12
JS封裝字串
專案常用JS方法封裝(四) [ 陣列相關處理 ]
2020-01-12
JS封裝陣列
開發時候常用的js方法封裝
2018-09-28
JS封裝
js常用時間方法
2018-11-23
JS
Linux下處理時間同步相關問題彙總
2020-09-28
Linux
java自己封裝檔案處理
2018-08-16
Java封裝
GitHub專案：自然語言處理專案的相關乾貨整理
2018-06-01
Github自然語言處理
JDBC常用方法封裝
2020-12-13
JDBC封裝
0.1、JS-時間處理積累
2020-11-09
JS
JS物件之封裝（二）
2019-02-16
JS物件封裝
專案經理常用專案管理工具及方法
2022-02-24
專案管理
聊天列表訊息合併，處理相鄰時間
2024-05-07
web前端常用的封裝方法
2019-02-16
Web前端封裝
【封裝小技巧】列表處理函式的封裝
2022-05-14
封裝函式
Python時間處理常用模組及用法詳解！
2022-12-14
Python
MySQL 磁碟空間滿導致表空間相關資料檔案損壞故障處理
2019-10-26
MySql
Vue管理系統前端系列二相關工具引入及封裝
2020-08-20
Vue前端封裝
java時間處理
2019-04-12
Java
PHP 時間處理
2019-04-02
PHP
【封裝小技巧】數字處理函式的封裝
2022-06-28
封裝函式
整理 js 日期物件的詳細功能，使用 js 日期物件獲取具體日期、昨天、今天、明天、每月天數、時間戳等，以及常用的日期時間處理方法
2022-12-04
JS物件時間戳
Rollup處理並打包JS檔案專案例項
2018-05-31
JS
django2中關於時間處理策略
2019-03-05
Django
時間相關的操作
2021-11-10
opencv 視訊處理相關
2021-11-22
OpenCV
vue專案封裝icon
2019-04-09
Vue封裝
ToolBar專案封裝使用
2018-06-16
封裝
js時間字串格式化以及url引數處理
2020-03-30
JS字串格式化
JavaScript常用的字串處理方法
2019-12-10
JavaScript字串
js封裝 Ajax ——常用工具函式
2019-02-16
JS封裝函式
前端機試之js方法封裝
2018-10-08
前端JS封裝
JS加減乘除位移方法封裝
2018-07-11
JS封裝
JS盒子模型、圖片懶載入、DOM庫封裝 — 1、JS盒子模型及常用操作樣式方法的封裝...
2018-09-28
JS模型封裝
PMP|專案經理如何做好相關方管理？
2021-06-25
js 一些專案中常用的原型方法整理
2018-12-16
JS原型
詳解JDBC資料庫連結及相關方法的封裝
2021-09-09
JDBC資料庫封裝
時間函式：與時間相關那些事。。。
2024-10-14
函式
陣列常用方法的簡單封裝
2020-12-21
陣列封裝