Comunidad de diseño web y desarrollo en internet

Problema con método temporizador setInterval();

Citar            
MensajeEscrito el 13 Oct 2016 09:05 pm
Buenos dias/tardes/noches antes que todo, bueno hoy vengo por un poco de ayuda :'c tengo ya mas de dos dias con un problema que la verdad no entiendo el por que no me funciona... pasa que estoy haciendo un contador regresivo ( un reloj que cuenta hacia atras para saber cuanto tiempo falta para que llegue un evento ). pasa que todo el codigo JS esta correcto ( a mi parecer ) pero el método setInterval(); no esta haciendo lo que debe, es la primera vez que le utilizo y bueno no se si hay algún problema de compatibilidad o una mala definicion del mismo.

Código :

var horaEv, horas, minutos, segundos, tServidor, tEvento;

var fecha = new Date();

   function obtenerDia(){
      var dia = fecha.getUTCDay();
         return dia;
   }

   function obtenerHora(){
      horas = fecha.getUTCHours();
      minutos = fecha.getUTCMinutes();
      segundos = fecha.getUTCSeconds();
      horas -= 4;
   }

   function evento(horaEvento){
      horaEv = horaEvento.split(":");
      for(var i = 0; i < horaEv.length; i++){
         horaEv[i] = parseInt(horaEv[i]);
      }
   }

   function convertirASegundos(horas, minutos, segundos){
      var tiempo;

      tiempo = ((horas*3600) + (minutos*60)) + segundos;
      return tiempo;
   }

   function convertirAHoras(tiempo, contenedor){
      var h, m, s, aux;

      h = Math.trunc(tiempo/3600);
      m = Math.trunc((tiempo - (h*3600))/60);
      s = Math.trunc(tiempo - ((h*3600) + (m*60)));
      document.getElementById(contenedor).textContent = h+":"+m+":"+s;
   }

   function evaluarTiempos(tiempoServidor, tiempoEvento){
      var eval;

      if(tiempoServidor > tiempoEvento){
         eval = false;
      }
      else{
         eval = true;
      }

      return eval;
   }

   function tw(dia){
      var bool, tEspera;

      if(dia >= 0){
         
         evento('13:30:00');
         tServidor = convertirASegundos(horas, minutos, segundos);
         tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
         tEspera = tEvento - tServidor;
         bool = evaluarTiempos(tServidor, tEvento);

         if(bool == false){
            
            evento('17:00:00');
            tServidor = convertirASegundos(horas, minutos, segundos);
            tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
            tEspera = tEvento - tServidor;
            bool = evaluarTiempos(tServidor, tEvento);

            if(bool == false){

               evento('21:00:00');
               tServidor = convertirASegundos(horas, minutos, segundos);
               tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
               tEspera = tEvento - tServidor;
               bool = evaluarTiempos(tServidor, tEvento);
            }
            else{
               convertirAHoras(tEspera, "hora");
            }

         }else{
            convertirAHoras(tEspera, "hora");
         }

      }
   }

   function relojes(){
      var dia = obtenerDia();
      obtenerHora();
      tw(dia);
      var timer = setInterval(relojes, 1000);
   }
   document.addEventListener("DOMContentLoaded", relojes, false);


Código :

<html>
<head>
   <meta charset="utf-8"/>
   <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
   <script src= "reloj1.2.js"></script>

   <style type="text/css">
      
      #hora{
         font-family: 'Audiowide', cursive;
      }
   </style>
</head>

<body>
   <div id="hora"></div>
</body>
</html>


de antemano gracias por la ayuda que me puedan dar.

NOTA: solo conosco el metodo setInterval para hacer lo que quiero, si alguien conoce alguna otra manera, pues estoy abierto a nuevas ideas :D

Por brilos

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Oct 2016 04:00 pm
estoy viendo el codigo y espero tu me ayudes!!

en la funcion convertirAHoras, el parametro que pasas en la varaible "tiempo"m no cambia y supongo que deberia cambiar... el timer ta bien, pero ese detalle lo veo ahi

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome
Citar            
MensajeEscrito el 18 Oct 2016 05:06 pm
Listo lo hice funcionar

Código :

   var horaEv, horas, minutos, segundos, tServidor, tEvento;

   function obtenerDia(fecha){
      var dia = fecha.getUTCDay();
         return dia;
   }

   function obtenerHora(fecha){
      horas = fecha.getUTCHours();
      minutos = fecha.getUTCMinutes();
      segundos = fecha.getUTCSeconds();
      horas -= 4;
   }

   function evento(horaEvento){
      horaEv = horaEvento.split(":");
      for(var i = 0; i < horaEv.length; i++){
         horaEv[i] = parseInt(horaEv[i]);
      }
   }

   function convertirASegundos(horas, minutos, segundos){
      var tiempo;

      tiempo = ((horas*3600) + (minutos*60)) + segundos;
      return tiempo;
   }

   function convertirAHoras(tiempo, contenedor){
      var h, m, s, aux;

      h = Math.trunc(tiempo/3600);
      m = Math.trunc((tiempo - (h*3600))/60);
      s = Math.trunc(tiempo - ((h*3600) + (m*60)));
      document.getElementById(contenedor).textContent = h+":"+m+":"+s;
   }

   function evaluarTiempos(tiempoServidor, tiempoEvento){
      var eval;

      if(tiempoServidor > tiempoEvento){
         eval = false;
      }
      else{
         eval = true;
      }

      return eval;
   }

   function tw(dia){
      var bool, tEspera;

      if(dia >= 0){
         
         evento('13:30:00');
         tServidor = convertirASegundos(horas, minutos, segundos);
         tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
         tEspera = tEvento - tServidor;
         bool = evaluarTiempos(tServidor, tEvento);

         if(bool == false){
            
            evento('17:00:00');
            tServidor = convertirASegundos(horas, minutos, segundos);
            tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
            tEspera = tEvento - tServidor;
            bool = evaluarTiempos(tServidor, tEvento);

            if(bool == false){

               evento('21:00:00');
               tServidor = convertirASegundos(horas, minutos, segundos);
               tEvento = convertirASegundos(horaEv[0], horaEv[1], horaEv[2]);
               tEspera = tEvento - tServidor;
               bool = evaluarTiempos(tServidor, tEvento);
            }
            else{
               convertirAHoras(tEspera, "hora");
            }

         }else{
            convertirAHoras(tEspera, "hora");
         }

      }
   }

   function relojes(){
      var fecha = new Date();
      var dia = obtenerDia(fecha);
      obtenerHora(fecha);
      tw(dia);
   }
   var timer = setInterval(relojes, 1000);
   document.addEventListener("DOMContentLoaded", relojes, false);


Bueno, te comento que fue lo que hice!!

1) tenias un error en la funcion relojes
tenias el setInterval andro de la funcion y esto hacia que se duplicara, eso en un periodo de tiempo explotaria tu naveagdor..

se ejecutaba 1,2,4,8,16...... veces

por tanto, el timer lo coloqué afuera de la funcion

2) la instancia de new Date() al momento de instanciarla afuera solo la instanciabas 1 vez y era el momento en que cargaba la web, por tanto la fecha no cambiaba

por tanto lo que hice fue meterla en la funcion relojes para que cada vez que pasaran los 1000 misilegundos trajera la hora nueva

y lo que hice fue pasarle por parametros la hora nueva a las funciones obtenerDia y obtenerHora

Saludos!!

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome
Citar            
MensajeEscrito el 19 Oct 2016 02:43 pm
O: franqgeek muchas gracias franqgeek ya vi tu observación y bueno son cosas que se me pasaron mil gracias de verdad :C es la primera vez para mi usando el setinterval y todo eso... muchas gracias de verdad *-*

Por brilos

1 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.