欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解js中常規(guī)日期格式處理、月歷渲染和倒計(jì)時(shí)函數(shù)

 更新時(shí)間：2016年12月28日 08:38:39   作者：webCoder  
大家在日常開發(fā)的時(shí)候經(jīng)常要用到日期格式的處理，下面這篇文章主要給大家介紹了js中常規(guī)日期格式處理、月歷渲染及倒計(jì)時(shí)函數(shù),有需要的朋友可以參考借鑒，下面來一起看看吧。

前言

相信大家都知道日期格式處理在前端的日常任務(wù)中非常常見，但是為此引入monent.js這樣的類庫又會(huì)顯得有點(diǎn)臃腫，畢竟我們一個(gè)特定的項(xiàng)目中，并不需要monent.js那么全的涵蓋范圍。另外，如果現(xiàn)在公司讓你自己手寫一個(gè)日歷組件（月歷、周歷），日歷組件中需要耦合我們的其他業(yè)務(wù)需求，如果有一個(gè)任務(wù)列表，當(dāng)11月22號的待進(jìn)行任務(wù)，我需要在日歷上有一個(gè)綠色圓點(diǎn)，表示當(dāng)天有待辦事項(xiàng)。

下面介紹一些常規(guī)的函數(shù)，希望對大家有用。

月歷效果圖


函數(shù)目錄

  1. getFormatDateStr 獲得指定日期格式的字符串；
  2. getDayPrevAfter 獲得n天前/后的日期；
  3. formatDateWithTimeZone 格式化日期帶時(shí)區(qū)，ISO 8601；
  4. countDownBySecond 倒計(jì)時(shí)；
  5. monthSize 獲得指定日期所在月的天數(shù)；
  6. getCalendarMonth 獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合；
  7. getOneDateWeekIndex 獲得指定的某天所在該月的第幾周，下標(biāo)從0開始；

下面是詳細(xì)的說明：

getFormatDateStr

/**
 * [zeroPadding 小于10的數(shù)字補(bǔ)0，必填]
 * @param {[Int]} value [description]
 * @return {[String]} [description]
 */
export function zeroPadding(value){
 return value < 10 ? `0${value}` : value;
}

/**
 * [_isDateStrSeparatorCh 判斷日期格式字符串的分隔符是否是中文]
 * @param {[String]} str [必填]
 * @return {[String]} [分隔符]
 */
function _getDateStrSeparator(str, startIndex, endIndex) {
 startIndex = startIndex ? startIndex : 4;
 endIndex = endIndex ? endIndex : 5;
 let separator = str.slice(startIndex, endIndex);
 if (separator === '年' || separator === '月' ) {
 separator = 'Ch';
 }
 return separator;
}

/**
 * [_isDateStrSeparatorCh 判斷日期格式字符串的分隔符是否是中文]
 * @param {[String]} str [必填]
 * @return {[String]} [分隔符]
 */
function _isDateStrSeparatorCh(str) {
 if ( str.indexOf('年')!=-1 || str.indexOf('月')!=-1 ) {
 return true;
 }
 return false;
}

/**
 * [getFormatDateStr 獲得指定日期格式的字符串]
 * @param {[String or Date]} date [要轉(zhuǎn)換的日期，必填]
 * @param {[String]} dateFormatStr [要轉(zhuǎn)化的目標(biāo)格式，必填，2016-11-22之間的分隔符可任意，可選項(xiàng)：
 * 'yyyy-mm-dd hh:mm:ss','yyyy/mm/dd hh:mm:ss','yyyy.mm.dd hh:mm:ss','yyyy年mm月dd hh:mm:ss',
 * 'yyyy-mm-dd hh:mm',
 * 'mm-dd hh:mm',
 * 'yyyy-mm-dd',
 * 'mm-dd',
 * 'hh:mm:ss',
 * 'hh:mm'
 * ]
 * @return {[String]}  [時(shí)間格式字符串]
 */
export function getFormatDateStr(date, dateFormatStr) {

 if ( !(date instanceof Date) ) {
 if ( date.indexOf('-') != -1 ) {
 date.replace(/\-/g,'/');
 }
  date = new Date(date);
 }

 dateFormatStr = dateFormatStr.toLowerCase();
 if (!dateFormatStr){
 return false;
 }

 let returnStr = '',
 separator = _getDateStrSeparator(dateFormatStr),
 year = date.getFullYear(),
  month = date.getMonth() + 1,
  day = date.getDate(),
  hour = date.getHours(),
  minute = date.getMinutes(),
 second = date.getSeconds();

 if ( /^yyyy(.{1})mm(.{1})dd hh:mm:ss$/.test(dateFormatStr) ) {
 if (_isDateStrSeparatorCh(dateFormatStr)) {
 returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
 } else {
 separator =
 returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
 }
 returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
 } else if ( /^yyyy(.{1})mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
 if (_isDateStrSeparatorCh(dateFormatStr)) {
 returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
 } else {
 returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
 }
 returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
 } else if ( /^mm(.{1})dd hh:mm$/.test(dateFormatStr) ) {
 if (_isDateStrSeparatorCh(dateFormatStr)) {
 returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
 } else {
 separator = _getDateStrSeparator(dateFormatStr, 2, 3);
 returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
 }
 returnStr += ` ${zeroPadding(hour)}:${zeroPadding(minute)}`;
 } else if ( /^yyyy(.{1})mm(.{1})dd$/.test(dateFormatStr) ) {
 if (_isDateStrSeparatorCh(dateFormatStr)) {
 returnStr = `${year}年${zeroPadding(month)}月${zeroPadding(day)}日`;
 } else {
 returnStr = `${year}${separator}${zeroPadding(month)}${separator}${zeroPadding(day)}`;
 }
 } else if ( /^mm(.{1})dd$/.test(dateFormatStr) ) {
 if (_isDateStrSeparatorCh(dateFormatStr)) {
 returnStr = `${zeroPadding(month)}月${zeroPadding(day)}日`;
 } else {
 separator = _getDateStrSeparator(dateFormatStr, 2, 3);
 returnStr = `${zeroPadding(month)}${separator}${zeroPadding(day)}`;
 }
 } else if ( /^hh:mm:ss$/.test(dateFormatStr) ) {
 returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}:${zeroPadding(second)}`;
 } else if ( /^hh:mm$/.test(dateFormatStr) ) {
 returnStr = `${zeroPadding(hour)}:${zeroPadding(minute)}`;
 }

 return returnStr;

}

getDayPrevAfter

/**
 * [getDayPrevAfter 獲得n天前/后的日期]
 * @param {[String]} date [日期，非必填參數(shù)，表示調(diào)用時(shí)的時(shí)間]
 * @param {[String]} type [前一天還是后一天，非必填參數(shù)，默認(rèn)后一天]
 * @param {[Int]} daysNum [天數(shù)，非必填參數(shù)，默認(rèn)一天]
 * @return {[Date]}  [description]
 */
export function getDayPrevAfter(date, type, daysNum) {

 date = date ? date : new Date();
 type = type ? type : 'after';
 daysNum = daysNum ? daysNum : 1;

 if ( !(date instanceof Date) ) {
 if ( date.indexOf('-') != -1 ) {
 date.replace(/\-/g,'/');
 }
 date = new Date(date);
 }

 let returnDate = date;
 if (type === 'prev') {
 returnDate = new Date(date.getTime() - (daysNum * 24 * 60 * 60 * 1000));
 } else if (type === 'after') {
 returnDate = new Date(date.getTime() + (daysNum * 24 * 60 * 60 * 1000));
 }
 return returnDate;

}

formatDateWithTimeZone

/**
 * [formatDateWithTimeZone 格式化日期帶時(shí)區(qū)，ISO 8601]
 * @param {[Date]} date [日期，非必填參數(shù)，表示調(diào)用時(shí)的時(shí)間]
 * @return {[String]} [ISO 8601格式的日期，example: 2016-11-21T14:09:15+08:00]
 */
export function formatDateWithTimeZone(date) {

 date = date ? date : new Date();
 if ( !(date instanceof Date) ) {
 if ( date.indexOf('-') != -1 ) {
 date.replace(/\-/g,'/');
 }
 date = new Date(date);
 }

 let tzo = -date.getTimezoneOffset(),
 dif = tzo >= 0 ? '+' : '-',
 pad = function (num) {
  let norm = Math.abs(Math.floor(num));
  return zeroPadding(norm);
 };
 return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}${dif}${pad(tzo / 60)}:${pad(tzo % 60)}`;

}

countDownBySecond

/**
 * [countDownBySecond 倒計(jì)時(shí)]
 * @param {[Int]} restSeconds [剩余秒數(shù)，必填]
 * @param {[Int]} timeInterval [時(shí)間間隔，非必填，默認(rèn)1000ms]
 * @param {[Function]} func [每倒計(jì)時(shí)一次，就需要執(zhí)行一次的回調(diào)函數(shù)名，非必填]
 * @param {[Function]} endFun [倒計(jì)時(shí)結(jié)束需要執(zhí)行的函數(shù)名，非必填]
 * @return {[null]} [無返回值]
 */
export function countDownBySecond(restSeconds, timeInterval, func, endCallback) {
 let timer = null;
 let total = restSeconds;
 timeInterval = timeInterval ? timeInterval : 1000;
 timer = setInterval(function() {
 --total;
 if (total <= 0) {
  clearInterval(timer);
  endCallback && endCallback();
 }
 func && func(total);
 }, timeInterval);
}

monthSize

/**
 * [monthSize 獲得指定日期所在月的天數(shù)]
 * @param {[Date]} oDate [指定的日期，非必填，默認(rèn)為當(dāng)天]
 * @return {[Int]} [總天數(shù)]
 */
function monthSize(oDate) {
 oDate = oDate ? oDate : new Date();
 let year = oDate.getFullYear(),
 month = oDate.getMonth(),
 _oDate = new Date();
 _oDate.setFullYear(year);
 _oDate.setMonth(month + 1, 0);
 return _oDate.getDate();
}

getCalendarMonth

/**
 * [getCalendarMonth 獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合，形如：
 * [{
 "date": "2016/10/30", //日期字符串
 "dateNum": 30, //日
 "isCurMonth": false, //是否當(dāng)前月
 "weekIndex": 0 //是本月的第幾周，下標(biāo)從0開始
 },{
 "date": "2016/10/31",
 "dateNum": 31,
 "isCurMonth": false,
 "weekIndex": 0
 },{
 "date": "2016/11/1",
 "dateNum": 1,
 "day": 2,
 "isCurMonth": true,
 "isToday": false,
 "weekIndex": 0
 }]
 ]
 * @param {[Date]} param [指定的日期，非必填，默認(rèn)為當(dāng)天]
 * @return {[Array]} [獲得指定日期所在月的第一周到第四/五周的數(shù)據(jù)組合]
 */
export function getCalendarMonth(date) {
 date = date ? date : new Date();
 let y = date.getFullYear();
 let m = date.getMonth();
 let _m;
 let firstDay = new Date(y, m, 1).getDay(); //當(dāng)月第一天 周期
 let days = monthSize(date);//當(dāng)月天數(shù)
 let prevMonthDays = monthSize(new Date(y, m - 1));//上月天數(shù)
 let initPrevDay = prevMonthDays - firstDay;
 let lines = Math.ceil((firstDay + days) / 7);
 _m = new Array(lines * 7);
 let nextMonthDay = 0;

 for (let i = 0; i < _m.length; i++) {
 let weekIndex = parseInt(i / 7);
 if (i < firstDay) {
  let date = ++initPrevDay;
  if (m === 0 && date > 7) {
  _m[i] = {
   isCurMonth: false,
   dateNum: date,
   weekIndex,
   date: `${y - 1}/${12}/${date}`
  };
  } else {
  _m[i] = {
   isCurMonth: false,
   dateNum: date,
   weekIndex,
   date: `${y}/${m}/${date}`
  };
  }
 } else if (i >= (firstDay + days)) {
  let date = ++nextMonthDay;

  if (m === 11 && date <= 7) {
  _m[i] = {
   isCurMonth: false,
   dateNum: date,
   weekIndex,
   date: `${y + 1}/${1}/${date}`
  };
  } else {
  _m[i] = {
   isCurMonth: false,
   dateNum: date,
   weekIndex,
   date: `${y}/${m + 2}/${date}`
  };
  }
 } else {
  let _date = i - firstDay + 1;
  let today = new Date();
  let today_y = today.getFullYear();
  let today_m = today.getMonth();
  let today_d = today.getDate();
  let isToday = today_y === y && today_m === m && today_d === _date ? true : false;
  _m[i] = {
  dateNum: _date, //日期
  day: i % 7, //周期
  weekIndex,
  isCurMonth: true,
  isToday,
  date: `${y}/${m + 1}/${_date}`
  };
 }
 }
 return _m;
}

getOneDateWeekIndex

/**
 * [getOneDateWeekIndex 獲得指定的某天所在該月的第幾周，下標(biāo)從0開始]
 * @param {[Date]} date [指定的日期，非必填，默認(rèn)為當(dāng)天]
 * @return {[Int]} [在該月的第幾周]
 */
export function getOneDateWeekIndex(date) {
 date = date ? date : new Date();
 let monthDays = getCalendarMonth(date);
 let dateString = getFormatDateStr(date, '/', true, false, false);
 let returnDate = monthDays.filter(item => {
 return item.date === dateString;
 });
 let weekIndex = returnDate[0].weekIndex;
 return weekIndex ? weekIndex : 0;
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，用上面的函數(shù)就能夠?qū)崿F(xiàn)日期格式轉(zhuǎn)換，倒計(jì)時(shí)，自定義月歷等常規(guī)的需要，希望對大家的學(xué)習(xí)或者工作能有一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

  • 詳解使用uni-app開發(fā)微信小程序之登錄模塊

    詳解使用uni-app開發(fā)微信小程序之登錄模塊

    這篇文章主要介紹了詳解使用uni-app開發(fā)微信小程序之登錄模塊，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-05-05
  • 微信小程序中遇到的iOS兼容性問題小結(jié)

    微信小程序中遇到的iOS兼容性問題小結(jié)

    這篇文章主要給大家介紹了關(guān)于微信小程序中遇到的一些iOS兼容性問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • JavaScript設(shè)計(jì)模式之代理模式簡單實(shí)例教程

    JavaScript設(shè)計(jì)模式之代理模式簡單實(shí)例教程

    這篇文章主要介紹了JavaScript設(shè)計(jì)模式之代理模式,簡單描述了代理模式的概念、功能、組成并結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript代理模式的定義與使用相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07
  • 淺談webpack和webpack-cli模塊源碼分析

    淺談webpack和webpack-cli模塊源碼分析

    這篇文章主要介紹了淺談webpack和webpack-cli模塊源碼分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • 對于input 框限定輸入值為浮點(diǎn)型的js代碼

    對于input 框限定輸入值為浮點(diǎn)型的js代碼

    下面小編就為大家?guī)硪黄獙τ趇nput 框限定輸入值為浮點(diǎn)型的js代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • CocosCreator如何實(shí)現(xiàn)劃過的位置顯示紋理

    CocosCreator如何實(shí)現(xiàn)劃過的位置顯示紋理

    這篇文章主要介紹了CocosCreator紋理shader的一些知識(shí)，想了解shader的同學(xué)，一定要看下，并且親自動(dòng)手實(shí)踐
    2021-04-04
  • 利用hasOwnProperty給數(shù)組去重的面試題分享

    利用hasOwnProperty給數(shù)組去重的面試題分享

    obj.hasOwnProperty(attr) 判斷是否是原型中的屬性，false就是原型中的屬性，下面這篇文章主要給大家介紹了一道利用hasOwnProperty給數(shù)組去重的面試題，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
    2018-11-11
  • 原生JavaScript實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效

    原生JavaScript實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效

    這篇文章主要為大家詳細(xì)介紹了原生JavaScript設(shè)計(jì)和實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • js遍歷map javaScript遍歷map的簡單實(shí)現(xiàn)

    js遍歷map javaScript遍歷map的簡單實(shí)現(xiàn)

    下面小編就為大家?guī)硪黄猨s遍歷map javaScript遍歷map的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-08-08
  • JS實(shí)現(xiàn)程序暫停與繼續(xù)功能代碼解讀

    JS實(shí)現(xiàn)程序暫停與繼續(xù)功能代碼解讀

    程序暫停與繼續(xù)的實(shí)現(xiàn)方法有很多，在本文為大家介紹下js中是如果做到的，并對具體的功能代碼進(jìn)行注釋說明，感興趣的朋友不要錯(cuò)過
    2013-10-10

最新評論