Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Temporizadores

JavaScript - Temporizadores

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Dennis
Val: 12
Ha aumentado su posición en 143 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Temporizadores

Publicado por Dennis (18 intervenciones) el 24/05/2022 17:56:45
Hola saludos:
Hay juegos que tienen varios temporizadores visibles, con tiempos limites difrerentes, y se pueden ver como se completan y empiezan desde el principio. Como puedo hacer eso mismo en javascript.
Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Temporizadores

Publicado por Ivan (118 intervenciones) el 24/05/2022 20:11:35
Hola,

interesante tu pregunta, básicamente se trata de crear un objeto para cada temporizador, Date() si lo quieres hacer con tiempo, o con un contador si lo quieres hacer con ciclos, dentro del objeto puedes añadir el tiempo máximo del temporizador.

Después se trata de usar una función para comprobar cada ciclo/segundo que ha transcurrido, esto también se puede hacer con bucles (los juegos suelen funcionar con bucles) o con setInterval.

He hecho este código de ejemplo para mostrar por donde van los tiros:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE>
<head>
  <script>
    var myTimers = [];
    function startTimers() {
      for (var i=1; i<4; i++) myTimers.push({t: new Date(), id: 't'+i*10, max: i * 10000});
      setInterval(showTimers, 1000);
    }
 
    function showTimers() {
      for (var i=0; i<myTimers.length; i++) {
        let myTimer = document.getElementById(myTimers[i].id);
        if ((Date.now() - myTimers[i].t.getTime()) > myTimers[i].max) myTimers[i].t = new Date();
        myTimer.innerHTML = Math.floor((Date.now() - myTimers[i].t.getTime())/1000);
      }
    }
  </script>
</head>
 
<body>
  <h1>Temporizadores con JavaScript</h1>
  <p>Ejemplo de varios temporizadores con JavaScript</p>
  <p>Temporizador de 10 segundos: <span id="t10"></span></p>
  <p>Temporizador de 20 segundos: <span id="t20"></span></p>
  <p>Temporizador de 30 segundos: <span id="t30"></span></p>
  <button onclick="startTimers()">Empezar</button>
</body>
</html>

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar