Posible solución (he incluido un campo de entrada para poder cambiar la hora y probar el script)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
margin: 5%;
text-align: center;
}
.form {
border: 1px solid blue;
}
input {
display: block;
margin: 12% auto;
padding: 1rem;
width: 132px;
}
</style>
</head>
<body>
<div class="content">
<p><strong>Problema:</strong> recargar la página cada día a una hora determinada</p>
<div class="form">
<input type="text" value="7:30:00" placeholder="hh:mm:ss" id="input">
<input type="button" onclick="update()" value="Actualizar hora">
</div>
</div>
<script>
////////////////////////////////////////////////////////////////
// Datos entrantes
let updateTime = '0:0:0';
////////////////////////////////////////////////////////////////
// Script
let arrUpdateTime = splitUpdateTime();
function splitUpdateTime()
{
const arrUpdateTime = updateTime.split(':');
for (let index = 0; index < 3; index++) {
arrUpdateTime[index] = parseInt(arrUpdateTime[index]);
}
return arrUpdateTime;
}
function checkToReload()
{
// console.log('checkToReload()'); // HACK: trace
const date = new Date();
if (date.getHours() === arrUpdateTime[0]
&& date.getMinutes() === arrUpdateTime[1]
&& date.getSeconds() === arrUpdateTime[2]
) {
location.reload();
}
}
setInterval('checkToReload()', 1000);
</script>
<script>
function update()
{
updateTime = document.getElementById('input').value;
arrUpdateTime = splitUpdateTime();
}
</script>
</body>
</html>
Desglosando el problema
La página debe actualizarse a una hora concreta, en este caso 7:30 am.
El script tiene varias partes:
- Datos de arranque: por ejemplo una variable global con la hora de actualización.
- La recarga de la página.
- Un contador de tiempo.
- El código de comprueba la hora actual con la de actualización.
Veamos con más detalle los puntos anteriores.
Guardo la hora de actualización (por defecto):
let updateTime = '7:30:00';
Voy a separar horas, minutos y segundos y convertirlos a números. Sólo necesito
hacerlo una vez, lo almaceno en otra global:
let arrUpdateTime = splitUpdateTime();
function splitUpdateTime()
{
const arrUpdateTime = updateTime.split(':');
for (let index = 0; index < 3; index++) {
arrUpdateTime[index] = parseInt(arrUpdateTime[index]);
}
return arrUpdateTime;
}
Para recargar la página con javascript usamos:
location.reload();
Esto recarga la ventana en la que se esta ejecutando el script. No se necesita llamar a window
porque este ya es el contexto de ejecución en el navegador.
Como hay que recargar la página a una hora concreta, uso un reloj interno,
ejecutando setTimeout()
, con un intervalo de 1 segundo. Se llama en cada ciclo
a una función que comprobará la hora:
setInterval('checkToReload()', 1000);
La función que compara la hora actual con la de recarga:
function checkToReload()
{
const date = new Date();
if (date.getHours() === arrUpdateTime[0]
&& date.getMinutes() === arrUpdateTime[1]
&& date.getSeconds() === arrUpdateTime[2]
) {
location.reload();
}
}