88

有没有人可以将我链接到一些教程,我可以在其中找到如何在 2 个 unix 日期时间之间返回 javascript 中的天数、小时数、分钟数、秒数?

我有:

var date_now = unixtimestamp;
var date_future = unixtimestamp;

我想返回(实时)从 date_now 到 date_future 还剩多少天、小时、分钟、秒。

4

22 回答 22

215

只需计算以秒为单位的差异(不要忘记 JS 时间戳实际上以毫秒为单位)并分解该值:

// get total seconds between the times
var delta = Math.abs(date_future - date_now) / 1000;

// calculate (and subtract) whole days
var days = Math.floor(delta / 86400);
delta -= days * 86400;

// calculate (and subtract) whole hours
var hours = Math.floor(delta / 3600) % 24;
delta -= hours * 3600;

// calculate (and subtract) whole minutes
var minutes = Math.floor(delta / 60) % 60;
delta -= minutes * 60;

// what's left is seconds
var seconds = delta % 60;  // in theory the modulus is not required

编辑代码已调整,因为我刚刚意识到原始代码返回的总小时数等,而不是计算一整天后剩下的小时数。

于 2012-12-16T18:13:08.363 回答
53

这是javascript中的:(例如,未来的日期是元旦)

演示(每秒更新)

var dateFuture = new Date(new Date().getFullYear() +1, 0, 1);
var dateNow = new Date();

var seconds = Math.floor((dateFuture - (dateNow))/1000);
var minutes = Math.floor(seconds/60);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);

hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
于 2012-12-16T19:13:51.773 回答
45

我称之为“雪人 ☃ 方法”,我认为当您需要额外的时间跨度(如几周、飞蛾、年、世纪……)并且不想要太多重复的代码时,它会更加灵活:

var d = Math.abs(date_future - date_now) / 1000;                           // delta
var r = {};                                                                // result
var s = {                                                                  // structure
    year: 31536000,
    month: 2592000,
    week: 604800, // uncomment row to ignore
    day: 86400,   // feel free to add your own row
    hour: 3600,
    minute: 60,
    second: 1
};

Object.keys(s).forEach(function(key){
    r[key] = Math.floor(d / s[key]);
    d -= r[key] * s[key];
});

// for example: {year:0,month:0,week:1,day:2,hour:34,minute:56,second:7}
console.log(r);

有 一个FIDDLE//ES6 Version (2018)TypeScript Version (2019)

灵感来自Alnitak的回答。

于 2015-09-11T01:42:15.240 回答
11

请注意,仅基于差异计算不会涵盖所有情况:闰年和“夏令时”的切换。

Javascript 的内置库用于处理日期很差。我建议你使用第三方 javascript 库,例如MomentJS;你可以在这里看到你正在寻找的功能。

于 2012-12-16T18:02:49.377 回答
10

我的解决方案不是那么清楚,但我把它作为另一个例子

console.log(duration('2019-07-17T18:35:25.235Z', '2019-07-20T00:37:28.839Z'));

function duration(t0, t1){
    let d = (new Date(t1)) - (new Date(t0));
    let weekdays     = Math.floor(d/1000/60/60/24/7);
    let days         = Math.floor(d/1000/60/60/24 - weekdays*7);
    let hours        = Math.floor(d/1000/60/60    - weekdays*7*24            - days*24);
    let minutes      = Math.floor(d/1000/60       - weekdays*7*24*60         - days*24*60         - hours*60);
    let seconds      = Math.floor(d/1000          - weekdays*7*24*60*60      - days*24*60*60      - hours*60*60      - minutes*60);
    let milliseconds = Math.floor(d               - weekdays*7*24*60*60*1000 - days*24*60*60*1000 - hours*60*60*1000 - minutes*60*1000 - seconds*1000);
    let t = {};
    ['weekdays', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'].forEach(q=>{ if (eval(q)>0) { t[q] = eval(q); } });
    return t;
}

于 2019-07-20T00:08:01.020 回答
8

有点不同的风格(也许对于某些人来说更具可读性)它可以在 JavaScript 中使用,而且它也可以在 TypeScript中使用。

如果您确保第一个日期始终大于第二个日期,则不需要 Math.abs() 模运算周围的圆括号也是不必要的。我保留它们以备清关。

let diffTime = Math.abs(new Date().valueOf() - new Date('2021-11-22T18:30:00').valueOf());
let days = diffTime / (24*60*60*1000);
let hours = (days % 1) * 24;
let minutes = (hours % 1) * 60;
let secs = (minutes % 1) * 60;
[days, hours, minutes, secs] = [Math.floor(days), Math.floor(hours), Math.floor(minutes), Math.floor(secs)]

console.log(days+'d', hours+'h', minutes+'m', secs+'s');

于 2021-10-04T02:15:55.610 回答
6

这是一个代码示例。我使用了简单的计算,而不是使用像 1 天是 86400 秒这样的预先计算。因此,您可以轻松地遵循逻辑。

// Calculate time between two dates:
var date1 = new Date('1110-01-01 11:10');
var date2 = new Date();

console.log('difference in ms', date1 - date2);

// Use Math.abs() so the order of the dates can be ignored and you won't
// end up with negative numbers when date1 is before date2.
console.log('difference in ms abs', Math.abs(date1 - date2));
console.log('difference in seconds', Math.abs(date1 - date2) / 1000);

var diffInSeconds = Math.abs(date1 - date2) / 1000;
var days = Math.floor(diffInSeconds / 60 / 60 / 24);
var hours = Math.floor(diffInSeconds / 60 / 60 % 24);
var minutes = Math.floor(diffInSeconds / 60 % 60);
var seconds = Math.floor(diffInSeconds % 60);
var milliseconds = Math.round((diffInSeconds - Math.floor(diffInSeconds)) * 1000);

console.log('days', days);
console.log('hours', ('0' + hours).slice(-2));
console.log('minutes', ('0' + minutes).slice(-2));
console.log('seconds', ('0' + seconds).slice(-2));
console.log('milliseconds', ('00' + milliseconds).slice(-3));
于 2016-09-20T09:50:09.577 回答
5

使用moment.js库,例如:

var time = date_future - date_now;
var seconds = moment.duration(time).seconds();
var minutes = moment.duration(time).minutes();
var hours   = moment.duration(time).hours();
var days    = moment.duration(time).days();
于 2018-09-28T07:15:56.427 回答
5

简短而灵活,支持负值,尽管使用两个逗号表达式:)

function timeUnitsBetween(startDate, endDate) {
  let delta = Math.abs(endDate - startDate) / 1000;
  const isNegative = startDate > endDate ? -1 : 1;
  return [
    ['days', 24 * 60 * 60],
    ['hours', 60 * 60],
    ['minutes', 60],
    ['seconds', 1]
  ].reduce((acc, [key, value]) => (acc[key] = Math.floor(delta / value) * isNegative, delta -= acc[key] * isNegative * value, acc), {});
}

例子:

timeUnitsBetween(new Date("2019-02-11T02:12:03+00:00"), new Date("2019-02-11T01:00:00+00:00"));
// { days: -0, hours: -1, minutes: -12, seconds: -3 }

受到RienNeVaPlu͢解决方案的启发。

于 2019-02-10T12:33:29.737 回答
4

我所知道的关于持续时间细分的最佳库是countdown.js。它处理所有困难的情况,如csg 提到的闰年和夏令时,甚至允许您指定模糊概念,如月和周。这是您的案例的代码:

//assuming these are in *seconds* (in case of MS don't multiply by 1000 below)
var date_now = 1218374; 
var date_future = 29384744;

diff = countdown(date_now * 1000, date_future * 1000, 
            countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS);
alert("days: " + diff.days + " hours: " + diff.hours + 
      " minutes: " + diff.minutes + " seconds: " + diff.seconds);

//or even better
alert(diff.toString()); 

这是一个JSFiddle,但它可能只能在 FireFox 或禁用网络安全的 Chrome 中工作,因为 countdown.js 以text/plain MIME 类型托管(您应该提供文件,而不是链接到 countdownjs.org) .

于 2015-02-15T08:27:14.773 回答
4

对于那些只想要小时和分钟的人来说,使用这个

const oldDate = new Date("2021-04-28T13:17:31.000Z")
const newDate = new Date("2021-04-28T22:08:07.000Z")
const msToTime = (ms) => ({
    hours: Math.trunc(ms/3600000),
    minutes: Math.trunc((ms/3600000 - Math.trunc(ms/3600000))*60) + ((ms/3600000 - Math.trunc(ms/3600000))*60 % 1 != 0 ? 1 : 0)
})

console.log(msToTime(Math.abs(newDate-oldDate)))

于 2021-04-30T02:13:44.740 回答
3
function update(datetime = "2017-01-01 05:11:58") {
    var theevent = new Date(datetime);
    now = new Date();
    var sec_num = (theevent - now) / 1000;
    var days    = Math.floor(sec_num / (3600 * 24));
    var hours   = Math.floor((sec_num - (days * (3600 * 24)))/3600);
    var minutes = Math.floor((sec_num - (days * (3600 * 24)) - (hours * 3600)) / 60);
    var seconds = Math.floor(sec_num - (days * (3600 * 24)) - (hours * 3600) - (minutes * 60));

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}

    return  days+':'+ hours+':'+minutes+':'+seconds;
}
于 2016-07-02T07:21:08.053 回答
3

因为 MomentJS 相当重且未优化,所以不怕使用模块的人可能应该看看date-fns,它提供了一个intervalToDuration方法,它可以满足你的需求:

const result = intervalToDuration({
  start: new Date(dateNow),
  end: new Date(dateFuture),
})

这将返回一个看起来像这样的对象:

{
  years: 39,
  months: 2,
  days: 20,
  hours: 7,
  minutes: 5,
  seconds: 0,
}

然后您甚至可以使用您喜欢的参数使用formatDuration将此对象显示为字符串

于 2021-02-02T02:27:05.810 回答
2

MomentJS 有一个功能可以做到这一点:

const start = moment(j.timings.start);
const end = moment(j.timings.end);
const elapsedMinutes = end.diff(start, "minutes");
于 2019-05-13T13:55:35.687 回答
2

这是我的看法:

timeSince(123456) => "1 day, 10 hours, 17 minutes, 36 seconds"

和代码:

function timeSince(date, longText) {
    let seconds = null;
    let leadingText = null;

    if (date instanceof Date) {
        seconds = Math.floor((new Date() - date) / 1000);
        if (seconds < 0) {
            leadingText = " from now";
        } else {
            leadingText = " ago";
        }
        seconds = Math.abs(seconds);
    } else {
        seconds = date;
        leadingText = "";
    }

    const intervals = [
        [31536000, "year"  ],
        [ 2592000, "month" ],
        [   86400, "day"   ],
        [    3600, "hour"  ],
        [      60, "minute"],
        [       1, "second"],
    ];

    let interval = seconds;
    let intervalStrings = [];
    for (let i = 0; i < intervals.length; i++) {
        let divResult = Math.floor(interval / intervals[i][0]);
        if (divResult > 0) {
            intervalStrings.push(divResult + " " + intervals[i][1] + ((divResult > 1) ? "s" : ""));
            interval = interval % intervals[i][0];
            if (!longText) {
                break;
            }
        }
    }
    let intStr = intervalStrings.join(", ");

    return intStr + leadingText;
}
于 2019-10-28T11:29:16.000 回答
2

简单的方法

function diff_hours(dt2, dt1) 
 {

  var diff =(dt2.getTime() - dt1.getTime()) / 1000;
  diff /= (60 * 60);
  return Math.abs(Math.round(diff));

 }


function diff_minutes(dt2, dt1) 
 {

  var diff =(dt2.getTime() - dt1.getTime()) / 1000;
  diff /= (60);
  return Math.abs(Math.round(diff));

 }

function diff_seconds(dt2, dt1) 
 {

  var diff =(dt2.getTime() - dt1.getTime()) / 1000;
  return Math.abs(Math.round(diff));

 }

function diff_miliseconds(dt2, dt1) 
 {

  var diff =(dt2.getTime() - dt1.getTime());
  return Math.abs(Math.round(diff));

 }


dt1 = new Date(2014,10,2);
dt2 = new Date(2014,10,3);
console.log(diff_hours(dt1, dt2));


dt1 = new Date("October 13, 2014 08:11:00");
dt2 = new Date("October 14, 2014 11:13:00");
console.log(diff_hours(dt1, dt2));

console.log(diff_minutes(dt1, dt2));

console.log(diff_seconds(dt1, dt2));

console.log(diff_miliseconds(dt1, dt2));
于 2020-01-24T13:45:44.903 回答
1
function calculateExamRemainingTime(exam_end_at) {

$(function(){

    const calcNewYear = setInterval(function(){

        const exam_ending_at    = new Date(exam_end_at);
        const current_time      = new Date();
       
        const totalSeconds     = Math.floor((exam_ending_at - (current_time))/1000);;
        const totalMinutes     = Math.floor(totalSeconds/60);
        const totalHours       = Math.floor(totalMinutes/60);
        const totalDays        = Math.floor(totalHours/24);

        const hours   = totalHours - ( totalDays * 24 );
        const minutes = totalMinutes - ( totalDays * 24 * 60 ) - ( hours * 60 );
        const seconds = totalSeconds - ( totalDays * 24 * 60 * 60 ) - ( hours * 60 * 60 ) - ( minutes * 60 );

        const examRemainingHoursSection = document.querySelector('#remainingHours');
        const examRemainingMinutesSection = document.querySelector('#remainingMinutes');
        const examRemainingSecondsSection = document.querySelector('#remainingSeconds');

        examRemainingHoursSection.innerHTML = hours.toString();
        examRemainingMinutesSection.innerHTML = minutes.toString();
        examRemainingSecondsSection.innerHTML = seconds.toString();

    },1000);
});
}

calculateExamRemainingTime('2025-06-03 20:20:20');
于 2020-06-28T14:25:25.253 回答
1
const arrDiff = [
  {
    label: 'second',
    value: 1000,
  },
  {
    label: 'minute',
    value: 1000 * 60,
  },
  {
    label: 'hour',
    value: 1000 * 60 * 60,
  },
  {
    label: 'day',
    value: 1000 * 60 * 60 * 24,
  },
  {
    label: 'year',
    value: 1000 * 60 * 60 * 24 * 365,
  },
];

function diff(date) {
  let result = { label: '', value: '' };
  const value = Date.now() - date;
  for (let obj of arrDiff) {
    let temp = Math.round(value / obj.value);
    if (temp === 0) {
      break;
    } else
      result = {
        value: temp,
        label: obj.label,
      };
  }
  return result;
}

const postDate = new Date('2020-12-17 23:50:00+0700');
console.log(diff(postDate));
于 2020-12-17T17:09:54.747 回答
0

这是一个代码,用于查找天、小时、分钟、秒中的两个日期之间的差异(假设未来日期是新年日期)。

var one_day = 24*60*60*1000;              // total milliseconds in one day

var today = new Date();
var new_year = new Date("01/01/2017");    // future date

var today_time = today.getTime();         // time in miliiseconds
var new_year_time = new_year.getTime();                         

var time_diff = Math.abs(new_year_time - today_time);  //time diff in ms  
var days = Math.floor(time_diff / one_day);            // no of days

var remaining_time = time_diff - (days*one_day);      // remaining ms  

var hours = Math.floor(remaining_time/(60*60*1000));   
remaining_time = remaining_time - (hours*60*60*1000);  

var minutes = Math.floor(remaining_time/(60*1000));        
remaining_time = remaining_time - (minutes * 60 * 1000);   

var seconds = Math.ceil(remaining_time / 1000);   
于 2017-01-19T17:58:27.490 回答
0
let delta = Math.floor(Math.abs(start.getTime() - end.getTime()) / 1000);
let hours = Math.floor(delta / 3600);
delta -= hours * 3600;
let minutes = Math.floor(delta / 60);
delta -= minutes * 60;
let seconds = delta;
if (hours.toString().length === 1) {
  hours = `0${hours}`;
}
if (minutes.toString().length === 1) {
  minutes = `0${minutes}`;
}
if (seconds.toString().length === 1) {
  seconds = `0${seconds}`;
}
const recordingTime = `${hours}:${minutes}:${seconds}`;
于 2018-12-23T10:04:28.943 回答
0

我们可以通过简单的方法做到

/*Declare the function */
function Clock(){
    let d1 = new Date("1 Jan 2021");
    let d2 = new Date();

    let difference = Math.abs(d1 - d2); //to get absolute value
    //calculate for each one
    let Days = Math.floor(difference / ( 1000 * 60 * 60 * 24 ));
    let Hours = Math.floor((difference / ( 1000 * 60 * 60 )) % 24);
    let Mins = Math.floor((difference / ( 1000 * 60 )) % 60);
    let Seconds = Math.floor((difference / ( 1000 )) % 60);

    //getting nodes and change the text inside
    let getday = document.querySelector(".big_text_days");
    let gethour = document.querySelector(".big_text_hours");
    let getmins = document.querySelector(".big_text_mins");
    let getsec = document.querySelector(".big_text_sec");

    getday.textContent = Check_Zero(Days); 
    gethour.textContent = Check_Zero(Hours);
    getmins.textContent = Check_Zero(Mins)
    getsec.textContent = Check_Zero(Seconds);
}

//call the funcion for every 1 second
setInterval(Clock , 1000);


//check and add zero in front, if it is lessthan 10
function Check_Zero(mytime){
    return mytime < 10 ? "0"+mytime : mytime;

}
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    max-width: 900px;
    margin: 0px auto;
    background-color:whitesmoke;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
}
.main_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
h1{
    font-size: 3rem;
    color: #3D4B72;
}
.big_text_days , .big_text_hours , .big_text_mins , .big_text_sec{
    font-size: 2rem;
    font-weight: bold;
    line-height: 2;
    color: #AC7591;
    text-align: center;
}
p{
    padding: 20px 0px 20px 0px;
    font-size: 3rem;
    text-align: center;
}
.spantext{
    color: #103c28;
    margin: 0px 3rem;
    font-size: 2rem;
    font-style: italic;
}
.text_sec{
    color : #005259;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Responsive site">
        <meta name="keywords" content="HTML,CSS,JS">
        <meta name="author" content="Ranjan">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Home</title>

        <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Bree+Serif|Exo|Exo+2|Lato|Mansalva|Playfair+Display&display=swap" rel="stylesheet">
       
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

</head>

    <body>
        
    <section>
      <h1>CountDown Timer</h1>
        </section>
                
         <section>
          <div class="main_container">
                
            <div class="days_container">
             <p class="big_text_days">1</p>
              <span class="spantext spantextdays">Days</span>
            </div>
    
            <div class="hours_container">
             <p class="big_text_hours">1</p>
              <span class="spantext spantexthours">Hours</span>
            </div>
    
            <div class="mins_container">
             <p class="big_text_mins">1</p>
              <span class="spantext spantextmins">Minutes</span>
            </div>
            
            <div class="sec_container">
             <p class="big_text_sec text_sec">1</p>
              <span class="spantext spantextsec">Seconds</span>
            </div>
         </div>
        </section>

    </body>
</html>

于 2020-09-23T16:20:36.067 回答
0

2021版

灵感来自AlnitakRienNeVaPlus 的答案。

自动计算开始和结束(参见下面的示例)。

const timeUnits = {
  year: 31536e6,
  month: 2592e6,
  week: 6048e5,
  day: 864e5,
  hour: 36e5,
  minute: 6e4,
  second: 1e3,
};

const timeUnitsNamesShort = {
  year: 'y',
  month: 'm',
  week: 'w',
  day: 'd',
  hour: 'h',
  minute: 'm',
  second: 's',
};

const isFuture = (date) => date > Date.now();

const dateDiffStructure = (date, units = timeUnits) => {
  let delta = Math.abs(date - Date.now());
  return Object.entries(units).reduce((acc, [key, value]) => {
      acc[key] = Math.floor(delta / value);
      delta -= acc[key] * value;
      return acc;
  }, {});
};

const dateDiffStructureToString = (date, diffStructure, values, short) => {
  const diffStructureEntries = values 
    ? Object.entries(diffStructure).filter(([key, value]) => values.includes(key) && value)
    : Object.entries(diffStructure).filter(([, value]) => value);
  if (!diffStructureEntries.length) return 'just now';
  const suffix = isFuture(date) ? 'left' : 'ago';
  const diffString = diffStructureEntries.reduce((acc, [key, value]) => {
      const timeUnit = short
          ? timeUnitsNamesShort[key]
          : value > 1
              ? ` ${key}s`
              : ` ${key}`;
      acc = acc ? `${acc} ` : '';
      return `${acc}${value}${timeUnit}`;
  }, '');
  return `${diffString} ${suffix}`;
};

const getDateDiff = (date, values, short) => {
  const diffStructure = dateDiffStructure(date);
  return dateDiffStructureToString(date, diffStructure, values, short);
};

测试和示例:

const timeUnits = {
  year: 31536e6,
  month: 2592e6,
  week: 6048e5,
  day: 864e5,
  hour: 36e5,
  minute: 6e4,
  second: 1e3,
};

const timeUnitsNamesShort = {
  year: 'y',
  month: 'm',
  week: 'w',
  day: 'd',
  hour: 'h',
  minute: 'm',
  second: 's',
};

const isFuture = (date) => date > Date.now();

const dateDiffStructure = (date, units = timeUnits) => {
  let delta = Math.abs(date - Date.now());
  return Object.entries(units).reduce((acc, [key, value]) => {
    acc[key] = Math.floor(delta / value);
    delta -= acc[key] * value;
    return acc;
  }, {});
};

const dateDiffStructureToString = (date, diffStructure, values, short) => {
  const diffStructureEntries = values ?
    Object.entries(diffStructure).filter(([key, value]) => values.includes(key) && value) :
    Object.entries(diffStructure).filter(([, value]) => value);
  if (!diffStructureEntries.length) return 'just now';
  const suffix = isFuture(date) ? 'left' : 'ago';
  const diffString = diffStructureEntries.reduce((acc, [key, value]) => {
    const timeUnit = short ?
      timeUnitsNamesShort[key] :
      value > 1 ?
      ` ${key}s` :
      ` ${key}`;
    acc = acc ? `${acc} ` : '';
    return `${acc}${value}${timeUnit}`;
  }, '');
  return `${diffString} ${suffix}`;
};

const getDateDiff = (date, values, short) => {
  const diffStructure = dateDiffStructure(date);
  console.log(`dateDiffStructure(${JSON.stringify(date)}) //`, diffStructure);
  return dateDiffStructureToString(date, diffStructure, values, short);
};

const tests = [
  ['After tomorrow', [new Date(Date.now() + 8.64e7 + 1e6)]],
  ['Yesterday', [new Date(Date.now() - 8.64e7)]],
  ['Past', [new Date(Date.now() * Math.random())]],
  ['Future short', [new Date(Date.now() * (Math.random() + 1)), ['year', 'month', 'day'], true]],
  ['Now', [Date.now()]]
];

tests.forEach(([text, args]) => {
  console.log(`${text}:`);
  console.group();
  console.log(`getDateDiff(${args.map(item => JSON.stringify(item)).join(', ')}) //`, getDateDiff(...args));
  console.groupEnd();
});

于 2021-03-12T17:48:48.647 回答