摘要:前言業(yè)務(wù)場景計(jì)算兩個(gè)時(shí)間相隔了多少年多少月多少日。實(shí)現(xiàn)原理獲取當(dāng)前時(shí)間若需要和當(dāng)前時(shí)間比較,這里提供當(dāng)前時(shí)間的獲取格式化方法。比較時(shí)間的時(shí)候,若為小的時(shí)間,這里直接返回。
1 前言 1.1 業(yè)務(wù)場景
JavaScript計(jì)算兩個(gè)時(shí)間相隔了 多少年多少月多少日。時(shí)分秒這里不作考慮。
2 實(shí)現(xiàn)原理 2.1 獲取當(dāng)前時(shí)間若需要和當(dāng)前時(shí)間比較,這里提供當(dāng)前時(shí)間的獲取格式化方法。我這里是根據(jù)傳入類型輸出日期或者日期+時(shí)間,可以明顯看出type為day時(shí),輸出日期。
getNowDate(type){ let now = new Date() let year = now.getFullYear() let month = now.getMonth() + 1 let day = now.getDate() let hh = now.getHours() let mm = now.getMinutes() let ss = now.getSeconds() month = month < 10 ? "0"+ month : month day = day < 10 ? "0"+ day : day if(type == "day"){ return year +"-"+ month +"-"+ day } else { return year +"-"+ month +"-"+ day + " "+ hh + ":" + mm + ":" + ss } },2.2比較時(shí)間
傳入兩個(gè)參數(shù),格式如:2008-08-08
getDiffYmdBetweenDate(sDate1,sDate2){ var fixDate = function(sDate){ var aD = sDate.split("-"); for(var i = 0; i < aD.length; i++){ aD[i] = fixZero(parseInt(aD[i])); } return aD.join("-"); }; var fixZero = function(n){ return n < 10 ? "0"+n : n; }; var fixInt = function(a){ for(var i = 0; i < a.length; i++){ a[i] = parseInt(a[i]); } return a; }; var getMonthDays = function(y,m){ var aMonthDays = [0,31,28,31,30,31,30,31,31,30,31,30,31]; if((y%400 == 0) || (y%4==0 && y%100!=0)){ aMonthDays[2] = 29; } return aMonthDays[m]; }; var checkDate = function(sDate){ }; var y = 0; var m = 0; var d = 0; var sTmp; var aTmp; sDate1 = fixDate(sDate1); sDate2 = fixDate(sDate2); if(sDate1 > sDate2){ return "past" } var aDate1 = sDate1.split("-"); aDate1 = fixInt(aDate1); var aDate2 = sDate2.split("-"); aDate2 = fixInt(aDate2); //計(jì)算相差的年份 /*aTmp = [aDate1[0]+1,fixZero(aDate1[1]),fixZero(aDate1[2])]; while(aTmp.join("-") <= sDate2){ y++; aTmp[0]++; }*/ y = aDate2[0] - aDate1[0]; if( sDate2.replace(aDate2[0],"") < sDate1.replace(aDate1[0],"")){ y = y - 1; } //計(jì)算月份 aTmp = [aDate1[0]+y,aDate1[1],fixZero(aDate1[2])]; while(true){ if(aTmp[1] == 12){ aTmp[0]++; aTmp[1] = 1; }else{ aTmp[1]++; } if(([aTmp[0],fixZero(aTmp[1]),aTmp[2]]).join("-") <= sDate2){ m++; } else { break; } } //計(jì)算天數(shù) aTmp = [aDate1[0]+y,aDate1[1]+m,aDate1[2]]; if(aTmp[1] > 12){ aTmp[0]++; aTmp[1] -= 12; } while(true){ if(aTmp[2] == getMonthDays(aTmp[0],aTmp[1])){ aTmp[1]++; aTmp[2] = 1; } else { aTmp[2]++; } sTmp = ([aTmp[0],fixZero(aTmp[1]),fixZero(aTmp[2])]).join("-"); if(sTmp <= sDate2){ d++; } else { break; } } return {y:y,m:m,d:d} },
返回的結(jié)果是一個(gè)對象,包含了y m d三個(gè)屬性,可根據(jù)業(yè)務(wù)進(jìn)行取用展示。
比較時(shí)間的時(shí)候,若sDate1為小的時(shí)間,這里直接返回past。
2.3 頁面展示這里根據(jù)業(yè)務(wù)不同可以作不同的展示。這里列出自己的Vue展示處理展示。
其中this.dataForm.hasdata為頁面的v-model。這樣的處理的效果是觀看直觀。
let now = this.getNowDate("day") let diffDate = this.getDiffYmdBetweenDate(now,this.data) let hasdata = "" if(diffDate == "past"){ this.dataForm.hasdata = "已過期" } else { if(diffDate.y > 0){ hasdata += diffDate.y + "年" + diffDate.m + "月" } else if (diffDate.y == 0) { if(diffDate.m > 0){ hasdata += diffDate.m + "月" } } this.dataForm.hasdata = hasdata + diffDate.d + "日" }2.4 頁面效果
感謝支持。若不足之處,歡迎大家指出,共勉。
如果覺得不錯(cuò),記得點(diǎn)贊 ,謝謝大家
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/103854.html
摘要:關(guān)于定時(shí)器的源碼在文件中,進(jìn)入就關(guān)于定時(shí)器的一些設(shè)計(jì)解釋,因?yàn)槭亲龇?wù)端代碼,在內(nèi)部等大部分事件都會創(chuàng)建一個(gè)定時(shí)器,任何時(shí)間都可能存在大量的定時(shí)器任務(wù),所以設(shè)計(jì)一個(gè)高效的定時(shí)器是很有必要的。 博客文章地址 setTimeout與setInterval setTimeout 和 setInterval 是我們在 javaScript 中經(jīng)常用到的定時(shí)器,setTimeout 方法用于...
摘要:備注沒整理格式,抱歉動(dòng)畫實(shí)現(xiàn)的幾種方式性能排序?qū)崿F(xiàn)方式自身調(diào)用調(diào)用的定時(shí)器值推薦最小使用的原因即每秒幀為什么倒計(jì)時(shí)動(dòng)畫一定要用而避免使用兩者區(qū)別及引發(fā)的線程討論線程討論為什么單線程是的一大特性。 備注:沒整理格式,抱歉 動(dòng)畫實(shí)現(xiàn)的幾種方式:性能排序js < requestAnimationFrame 3->4->2. 那么在來看你這段代碼。 var t = true; window...
摘要:高級定時(shí)器高級技巧異步首先,中沒有代碼是立即執(zhí)行的,而是一旦進(jìn)程空閑則立即執(zhí)行。針對第二種問題,使用定時(shí)器是解決方法之一。為定時(shí)器設(shè)定的時(shí)間間隔使得進(jìn)程有時(shí)間在處理項(xiàng)目的事件之間轉(zhuǎn)入空閑。該函數(shù)首先清除之前設(shè)置的任何定時(shí)器。 title: 高級定時(shí)器 date: 2016-12-13 tag: JS高級技巧 0x00 異步 首先,JavaScript 中沒有代碼是立即執(zhí)行的,...
摘要:最簡單的案例以最簡單的情景為例在某一時(shí)刻點(diǎn)只調(diào)用一次函數(shù),那么將在時(shí)間后才會真正觸發(fā)函數(shù)。后續(xù)我們會逐漸增加黑色鬧鐘出現(xiàn)的復(fù)雜度,不斷去分析紅色鬧鐘的位置。 序 相比網(wǎng)上教程中的 debounce 函數(shù),lodash 中的 debounce 功能更為強(qiáng)大,相應(yīng)的理解起來更為復(fù)雜; 解讀源碼一般都是直接拿官方源碼來解讀,不過這次我們采用另外的方式:從最簡單的場景開始寫代碼,然后慢慢往源碼...
摘要:接下來看下偽代碼調(diào)度算法偽代碼原來這段寫的匆忙且不好,重新更新了一篇講調(diào)度算法的大概實(shí)現(xiàn)性能改善的原理二。 問題背景 React16 更新了底層架構(gòu),新架構(gòu)主要解決更新節(jié)點(diǎn)過多時(shí),頁碼卡頓的問題。譬如如下代碼,根據(jù)用戶輸入的文字生成10000行數(shù)據(jù),用戶輸入框會出現(xiàn)卡頓現(xiàn)象。 class App extends React.Component { constructor( prop...
閱讀 3451·2023-04-25 19:39
閱讀 3799·2021-11-18 13:12
閱讀 3634·2021-09-22 15:45
閱讀 2433·2021-09-22 15:32
閱讀 716·2021-09-04 16:40
閱讀 3727·2019-08-30 14:11
閱讀 1883·2019-08-30 13:46
閱讀 1563·2019-08-29 15:43