Skip to main content
se añadieron 380 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000610000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 24000002600000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else if (seconds < 32000000) {
    return "hace " + (Math.ceil(seconds / 2592000)) + " meses";
  } else if (seconds < 95000000) {
    return "hace " + (Math.ceil(seconds / 31536000)) + " años";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + dpost.getFullYear();
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 15 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 15000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 13:0830:00Z"></div>
<div data-timepost="2018-07-05 13:0615:00Z"></div>
<div data-timepost="2018-07-05 13:00:00Z"></div>
<div data-timepost="2018-07-05 12:2530:00Z"></div>
<div data-timepost="2018-07-04 07:00:00Z"></div>
<div data-timepost="2018-06-25 12:00:00Z"></div>
<div data-timepost="2018-03-25 12:00:00Z"></div>
<div data-timepost="2017-04-25 12:00:00Z"></div>
<div data-timepost="2012-06-25 12:00:00Z"></div>
// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2400000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + dpost.getFullYear();
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 15 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 15000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 13:08:00Z"></div>
<div data-timepost="2018-07-05 13:06:00Z"></div>
<div data-timepost="2018-07-05 13:00:00Z"></div>
<div data-timepost="2018-07-05 12:25:00Z"></div>
<div data-timepost="2018-07-04 07:00:00Z"></div>
<div data-timepost="2018-06-25 12:00:00Z"></div>
// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 610000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2600000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else if (seconds < 32000000) {
    return "hace " + (Math.ceil(seconds / 2592000)) + " meses";
  } else if (seconds < 95000000) {
    return "hace " + (Math.ceil(seconds / 31536000)) + " años";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + dpost.getFullYear();
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 15 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 15000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 13:30:00Z"></div>
<div data-timepost="2018-07-05 13:15:00Z"></div>
<div data-timepost="2018-07-05 13:00:00Z"></div>
<div data-timepost="2018-07-05 12:30:00Z"></div>
<div data-timepost="2018-07-04 07:00:00Z"></div>
<div data-timepost="2018-06-25 12:00:00Z"></div>
<div data-timepost="2018-03-25 12:00:00Z"></div>
<div data-timepost="2017-04-25 12:00:00Z"></div>
<div data-timepost="2012-06-25 12:00:00Z"></div>
se añadieron 605 caracteres en el cuerpo
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como te ponía en un comentario, no uses PHP para eso, usa JavaScript para poder actualizar los valores desde el lado del cliente sin necesidad de recargar la página o hacer llamadas al servidor con AJAX.

Nota: es importante que todas las fechas estén en una misma franja horaria. En este caso, he usado UTC (hora zulu, por eso las horas tienen una Z al final). De ese modo no vas a tener problemas de diferentes horas en el cliente.

En JavaScript puedes trabajar fácilmente con horas en UTC añadiendo UTC después del get. Por ejemplo, Date.getHours() va a devolver la hora local del cliente, mientras que Date.getUTCHours() va a devolver la hora del cliente pero en UTC (con la diferencia horaria ya calculada). En PHP puedes usar gmdate o date_default_timezone_set (que ya usabas) para asegurarte de que tus horas van a estar en UTC.

// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2400000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + (1900 + dpost.getYeargetFullYear());
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 3015 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 3000015000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 1213:5508:00Z"></div>
<div data-timepost="2018-07-05 1213:5106:00Z"></div>
<div data-timepost="2018-07-05 1213:3700:00Z"></div>
<div data-timepost="2018-07-05 12:25:00Z"></div>
<div data-timepost="2018-07-04 07:3700:00Z"></div>
<div data-timepost="2018-06-1525 12:3700:00Z"></div>

Como te ponía en un comentario, no uses PHP para eso, usa JavaScript para poder actualizar los valores desde el lado del cliente sin necesidad de recargar la página o hacer llamadas al servidor.

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2400000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + (1900 + dpost.getYear());
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 30 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 30000);
<div data-timepost="2018-07-05 12:55:00Z"></div>
<div data-timepost="2018-07-05 12:51:00Z"></div>
<div data-timepost="2018-07-05 12:37:00Z"></div>
<div data-timepost="2018-07-05 12:25:00Z"></div>
<div data-timepost="2018-07-04 07:37:00Z"></div>
<div data-timepost="2018-06-15 12:37:00Z"></div>

Como te ponía en un comentario, no uses PHP para eso, usa JavaScript para poder actualizar los valores desde el lado del cliente sin necesidad de recargar la página o hacer llamadas al servidor con AJAX.

Nota: es importante que todas las fechas estén en una misma franja horaria. En este caso, he usado UTC (hora zulu, por eso las horas tienen una Z al final). De ese modo no vas a tener problemas de diferentes horas en el cliente.

En JavaScript puedes trabajar fácilmente con horas en UTC añadiendo UTC después del get. Por ejemplo, Date.getHours() va a devolver la hora local del cliente, mientras que Date.getUTCHours() va a devolver la hora del cliente pero en UTC (con la diferencia horaria ya calculada). En PHP puedes usar gmdate o date_default_timezone_set (que ya usabas) para asegurarte de que tus horas van a estar en UTC.

// para hacer pruebas asignamos la fehca/hora actual a uno de los posts
var ahora = new Date();
document.getElementById("horaactual").dataset.timepost = ahora.getUTCFullYear() + "-" + (1+ahora.getUTCMonth()) + "-" + ahora.getUTCDate() + " " + ahora.getUTCHours() + ":" + ahora.getUTCMinutes() + ":" + ahora.getUTCSeconds() + "Z";

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  // aquí pongo algunos ejemplos, puedes añadir más `if else` para hacer los tiempos más específicos
  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2400000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + dpost.getFullYear();
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 15 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 15000);
<div id="horaactual"></div>
<div data-timepost="2018-07-05 13:08:00Z"></div>
<div data-timepost="2018-07-05 13:06:00Z"></div>
<div data-timepost="2018-07-05 13:00:00Z"></div>
<div data-timepost="2018-07-05 12:25:00Z"></div>
<div data-timepost="2018-07-04 07:00:00Z"></div>
<div data-timepost="2018-06-25 12:00:00Z"></div>
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como te ponía en un comentario, no uses PHP para eso, usa JavaScript para poder actualizar los valores desde el lado del cliente sin necesidad de recargar la página o hacer llamadas al servidor.

La idea sería poner la fecha del post en un data-atributo (con un formato fácil de leer con Javascript como por ejemplo YYYY-MM-DD HH:mm:SS" y cada cierto tiempo actualizar el valor. Así es como lo hacía antes Facebook (y parece que aún lo sigue haciendo) y también parece que Stack Overflow usa un sistema parecido.

Podrías adaptar la función que ya tienes en PHP y transformarla a JavaScript, depués llamarla cada 30 segundos (por ejemplo) para que se actualice el valor del tiempo. Algo como esto:

// función que genera la cadena de tiempo dependiendo de la fecha-hora pasada
function time_ago(fecha) {
  var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
  var dnow = new Date();
  var dpost = new Date(fecha);

  // dividimos por mil porque son milisegundos
  seconds = (dnow - dpost) / 1000;

  if (seconds <= 10) {
    return "ahora mismo";
  } else if (seconds < 60) {
    return "hace " + Math.ceil(seconds) + " segundos";
  } else if (seconds < 300) {
    return "hace " + (Math.ceil(seconds / 60)) + " minutos";
  } else if (seconds < 1000) {
    return "hace 15 minutos";
  } else if (seconds < 2000) {
    return "hace 30 minutos";
  } else if (seconds < 86400) {
    return "hace " + (Math.ceil(seconds / 3600)) + " horas";
  } else if (seconds < 605000) {
    return "hace " + (Math.ceil(seconds / 86400)) + " días";
  } else if (seconds < 2400000) {
    return "hace " + (Math.ceil(seconds / 604800)) + " semanas";
  } else {
    return "el " + dpost.getDate() + " de " + months[dpost.getMonth()] + " de " + (1900 + dpost.getYear());
  }
}

// función que cambia el texto de las fechas
function actualizar_fechas() {
  var posts = document.querySelectorAll("[data-timepost]");

  for (var x = 0; x < posts.length; x++) {
    posts[x].textContent = "Posteado " + time_ago(posts[x].dataset.timepost);
  }
}

// llamamos la función acutalizar_fechas al cargar la página y cada 30 segundos
actualizar_fechas();
setTimeout(actualizar_fechas, 30000);
<div data-timepost="2018-07-05 12:55:00Z"></div>
<div data-timepost="2018-07-05 12:51:00Z"></div>
<div data-timepost="2018-07-05 12:37:00Z"></div>
<div data-timepost="2018-07-05 12:25:00Z"></div>
<div data-timepost="2018-07-04 07:37:00Z"></div>
<div data-timepost="2018-06-15 12:37:00Z"></div>