Dadas las 2 fechas de JavaScript y el trabajo es obtener la diferencia de tiempo relativa entre ellas (por ejemplo, hace 2 horas, hace 2,5 días, etc.) Aquí se analizan 2 enfoques con la ayuda de javaScript.
Enfoque 1:
- Obtenga la fecha anterior y la fecha actual en una variable.
- Calcula los milisegundos en Minuto, Hora, Día, Mes y en un Año.
- Calcule la diferencia de milisegundos entre prevDate y currDate.
- Compare estos milisegundos con los milisegundos en Minuto, Hora, Día, Mes y en un año en este orden.
- Si los milisegundos son menores que cualquiera de ellos, entonces calcule los respectivos Minutos, Horas, Días, Meses y Años.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the relative timestamp difference between dates in JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun();">
click here
</button>
<p id="GFG_DOWN">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var prevDate = new Date();
prevDate.setDate(prevDate.getDate() - 6);
up.innerHTML =
"Click on the button to get relative time difference between dates." +
"<br><br>Older Date : " + prevDate;
function timeDiff(curr, prev) {
var ms_Min = 60 * 1000; // milliseconds in Minute
var ms_Hour = ms_Min * 60; // milliseconds in Hour
var ms_Day = ms_Hour * 24; // milliseconds in day
var ms_Mon = ms_Day * 30; // milliseconds in Month
var ms_Yr = ms_Day * 365; // milliseconds in Year
var diff = curr - prev; //difference between dates.
// If the diff is less then milliseconds in a minute
if (diff < ms_Min) {
return Math.round(diff / 1000) + ' seconds ago';
// If the diff is less then milliseconds in a Hour
} else if (diff < ms_Hour) {
return Math.round(diff / ms_Min) + ' minutes ago';
// If the diff is less then milliseconds in a day
} else if (diff < ms_Day) {
return Math.round(diff / ms_Hour) + ' hours ago';
// If the diff is less then milliseconds in a Month
} else if (diff < ms_Mon) {
return 'Around ' + Math.round(diff / ms_Day) + ' days ago';
// If the diff is less then milliseconds in a year
} else if (diff < ms_Yr) {
return 'Around ' + Math.round(diff / ms_Mon) + ' months ago';
} else {
return 'Around ' + Math.round(diff / ms_Yr) + ' years ago';
}
}
function GFG_Fun() {
$('#GFG_DOWN').html(timeDiff(new Date(), prevDate));
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Obtenga la fecha anterior y la fecha actual en una variable.
- Calcule la diferencia de segundos, minutos, horas y días entre las fechas.
- Compare estos parámetros con los 60 segundos, 60 minutos, 24 horas, día en este orden.
- Si alguna de esas condiciones cumple, devuelva el parámetro respectivo.
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Get the relative timestamp difference
between dates in JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<button onclick="GFG_Fun();">
click here
</button>
<p id="GFG_DOWN">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
var prevDate = new Date();
prevDate.setDate(prevDate.getDate() - 6);
prevDate.setHours(prevDate.getHours() - 6);
up.innerHTML =
"Click on the button to get relative time " +
"difference between dates.<br><br>Older Date : " + prevDate;
function conversion(ms) {
// Calculating Seconds
var sec = (ms / 1000).toFixed(1);
// Calculating Minutes
var min = (ms / (1000 * 60)).toFixed(1);
// Calculating hours
var hrs = (ms / (1000 * 60 * 60)).toFixed(1);
// Calculating days
var days = (ms / (1000 * 60 * 60 * 24)).toFixed(1);
if (sec < 60) {
return sec + " Sec";
} else if (min < 60) {
return min + " Min";
} else if (hrs < 24) {
return hrs + " Hrs";
} else {
return days + " Days"
}
}
function GFG_Fun() {
var date = new Date();
$('#GFG_DOWN').html(conversion(date.getTime() - prevDate.getTime()));
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA