JavaScript - Hacer una cuenta atrás que se mantenga entre páginas

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 22/09/2020 11:16:07

Buenos días.

Estoy haciendo una página de Escape Room Online y me gustaría añadir un cronómetro, por ejemplo de 60 mínutos y, que cuando cambie de página, este cronómetro se mantenga y la verdad es que no se muy bien como hacerlo y creo que es cosa de javascript.

¿Me podéis ayudar?

Gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 3.506

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por joel (895 intervenciones) el 22/09/2020 17:13:24

Mira este código... hace exactamente lo que tu quieres
https://www.lawebdelprogramador.com/codigo/JavaScript/2779-Cronometro-que-continua-aunque-se-cierre-el-navegador.html

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 23/09/2020 10:42:45

Gracias por la respuesta.

Lo único que ese contador va hacia delante y a mi me gustaría que fuera marcha atras, por ejemplo desde 60 mínutos a 0.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por joel (895 intervenciones) el 23/09/2020 11:21:38

Era para mostrarte el ejemplo de utilizar la base de datos del servidor para que no se pierda la cuenta aunque cambies de pagina.

Aquí tienes como hacer una cuenta atras... https://www.lawebdelprogramador.com/codigo/JavaScript/1431-Cuenta-atras.html

Tienes que juntar los dos códigos, el de la cuenta atrás, con guardar los valores en la base de datos del navegador.

Valora esta respuesta

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 25/09/2020 17:51:15

Buenas de nuevo.

Estoy liado con lo de la cuenta atrás y he conseguido, al menos, que funcione con los códigos que me diste. El problema es que aún no consigo que se guarde el valor en localStorage o no se como recuperarlo.

La cuestión es que, la cuenta atrás no se puede para por lo que debería guardar cada vez que se realice la función el valor actual de las variables Horas, minutos y segundos.

Dejo el código a continuación para ver si podéis ayudarme en lo que me he equivocado.

Gracias desde un principio.

(function()

    //Codigo que muestra una cuenta atras hasta finalizar el tiempo indicado

    //variables que determinan el total de horas, minutos y segundos para la cuenta atras

    let toHour=1;

    let toMinute=0;

    let toSecond=0;

	//cuenta atras

    function countDown(){

		if (--toSecond<0) {

            toSecond=59;

            if (--toMinute<0) {

                toMinute=59;

                toHour--;

         if (toHour<0) {

            clearInterval(interval);

        } else {

            form.second.value=toSecond;

            form.minute.value=toMinute;

            form.hour.value=toHour;

    let interval=setInterval(countDown, 1000);

	localStorage.setItem("toHour", toHour);

	localStorage.setItem("toMinute", toMinute);

	localStorage.setItem("toSecond", toSecond);

})();

	window.onload=function()

        if(localStorage.getItem("toSecond")!=null)

            toHour=localStorage.getItem("toHour");

            toMinute=localStorage.getItem("toMinute");

            toSecond=localStorage.getItem("toSecond");

            countDown();

	</script>

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por joel (895 intervenciones) el 25/09/2020 21:07:07

Hola Alberto, prueba así:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <style>

    input

        font-family: Verdana;

        font-size: 12;

        padding:5px;

        color: #ffffff;

        border-width: 0;

        background-color: #000077;

        text-align: center;

    </style>

</head>

<body>

    <form name="form">

        Tiempo restante...:

        <input type="text" size="3" name="hour" disabled>:

        <input type="text" size="3" name="minute" disabled>:

        <input type="text" size="3" name="second" disabled>

    </form>

</body>

</html>

<script>

//Codigo que muestra una cuenta atras hasta finalizar el tiempo indicado

//La Web del Programador

//http://www.lawebdelprogramador.com

//variables que determinan el total de horas, minutos y segundos para la cuenta atras

let toHour=1;

let toMinute=0;

let toSecond=0;

if (localStorage.getItem("toSecond")) {

    toHour=localStorage.getItem("toHour");

    toMinute=localStorage.getItem("toMinute");

    toSecond=localStorage.getItem("toSecond");

//cuenta atras

const countDown = () => {

    if (--toSecond<0) {

        toSecond=59;

        if (--toMinute<0) {

            toMinute=59;

            toHour--;

    if (toHour<0) {

        clearInterval(interval);

    } else {

        form.second.value=toSecond;

        form.minute.value=toMinute;

        form.hour.value=toHour;

    localStorage.setItem("toHour", toHour);

    localStorage.setItem("toMinute", toMinute);

    localStorage.setItem("toSecond", toSecond);

let interval=setInterval(countDown, 1000);

</script>

Valora esta respuesta

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 26/09/2020 10:07:12

Gracias. Arreglado.

Valora esta respuesta

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 26/09/2020 11:28:44

Una cuestión más ya que estamos metidos en el tema y así ya intento finiquitar esta parte.

¿Cómo se haría para que pasara "Algo" al finalizar el contador? Entiendo que sería algo así como añadir un if en la función que chequee el contador cada vez que hace una vuelta y, en caso de que todos los valores sean 0, ejecute un refresco a otra pantalla.

La idea es que, el contador sea estable a 60 mínutos. Y, cuando este llegue a 0 se pierda el acceso a la parte que se está ejecutando sin posibilidad de vuelta atrás. Además de realizar un cambio en una base de datos que supongo que tendré que añadir con php dentro de la propia función de js.

El problema es que, si requiere Ajax para el refresco de pantalla ya estoy completamente perdido pues eso no lo he tocado en absoluto.

Gracias de nuevo y perdona que sea pesado.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por joel (895 intervenciones) el 26/09/2020 19:07:41

Hola Alberto, en la linea 56 se finaliza el tiempo atras... cuando entra en esa linea quiere decir que ha llegado a 0.

El resto de cosas que comentas, no me queda claro que quieres hacer...

Valora esta respuesta

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 27/09/2020 14:26:24

Pero la linea 56 sólo comprueba toHour que se supone que en la primera vuelta se coloca 0 no? para que se inicien los 59 mínutos digo.

A ver, me explico. Cuando el contador llegue a 0 quiero que salte un alert y cambie la pagina con un windows.location, ademas de añadir unas modificaciones en una base mysql con php ¿Iría todo dentro de ese if?

Gracias.

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por joel (895 intervenciones) el 28/09/2020 07:54:50

No, no, en la linea 56 se finaliza el interval... hay esto en la linea 56

clearInterval(interval);

Debajo puedes poner el alert() y la redireccion sin problema.

Valora esta respuesta

Comentar

Pos: 68

Val: 30

Hacer una cuenta atrás que se mantenga entre páginas

Publicado por Alberto (9 intervenciones) el 28/09/2020 10:54:56

Lo hice gracias ^^

Valora esta respuesta

Comentar

Obtener enlace web desde un botón

Crear nueva página con javascript?