3

estoy realizando un temporizador en JavaScript y quiero programar el botón Reinicio que me guarde el valor ingresado en los input ejemplo: Horas=0, Minutos=20, segundos=0 Cuando le de en reiniciar el conteo empiece desde los 00:20:00, así sucesivamente

Muchas gracias

$(document).ready(function(){

  $("#abierto").click(function(){

    $("#login form").fadeToggle(500);
    $(this).toggleClass("cerrado");
  });
});

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

  var form= document.getElementById("form");
  var btn_iniciar=document.getElementById("btn-iniciar");
  
   var h=document.getElementById("h");
    var m=document.getElementById("m");
    var s= document.getElementById("s");
   
    var amarillo= document.getElementById("ama");
    var segundo = document.getElementById("seg");
    var interval;

    var Horas = document.getElementById("Horas");
    var Minutos = document.getElementById("Minutos");
    var Segundos = document.getElementById("Segundos");

   var btnMenu = document.getElementById("btn-menu");
   var nav = document.getElementById("nav");

   btnMenu.addEventListener("click",function(){
      nav.classList.toggle("mostrar");
   });

   btn_iniciar.addEventListener("click",function(){

      nav.classList.toggle("mostrar");
   });

       
/*----------Accion botones Pausar, Reiniciar-------*/
function inicio () {
  control = setInterval(contador_regresivo,10);
 // document.getElementById("inicio").disabled = true;
  document.getElementById("parar").disabled = false;
 // document.getElementById("continuar").disabled = true;
 // document.getElementById("reinicio").disabled = false;
}
function parar () {
  clearInterval(interval);
  document.getElementById("parar").disabled = true;
  document.getElementById("continuar").disabled = false;
}

function reinicio () {
 /*location.reload();*/
 h=document.getElementById("h");
  m=document.getElementById("m");
  s= document.getElementById("s");

  var amarillo= document.getElementById("ama");
  var segundo = document.getElementById("seg");

  contador_regresivo();  
 
}

/*----------FIN-Accion botones Pausar, Reiniciar-------*/


    function contador_regresivo()
    {

       h=parseInt(h.value);
        m=parseInt(m.value);
        s=parseInt(s.value);
        
        amarillo=parseInt(amarillo.value);

        segundo=parseInt(segundo.value);
        
         
        interval = setInterval(function(){
          setInter();
            
             innerHTML();

        },1000);
        document.getElementById("parar").disabled = false;
        document.getElementById("continuar").disabled = true;
        document.getElementById("reinicio").disabled = false;
    }

    function setInter(){
      validarCampo();
     
        if(s > 0 && s <= 60) { 
            s--;
            if(s<10){

              s = "0" + s;

            }
           // Segundos.innerHTML = ":" + s; 
            cambiar();
            
        }
        else if (m > 0 && m <= 60) {
            m--;
           if(m <10){
               m = "0" + m;
            }
           // Minutos.innerHTML = ":" + m; 
            s = 59;
            
            cambiar();
            
        }
        else if (h > 0) {
            h--;
            if(h<10){
              h= "0" + h;
              }
           // Horas.innerHTML = h; 
            m = 59;
            s = 59;
          
            cambiar();
           
        }                            
       /* else {
            h = 0;
            m = 0;
            s = 0;                           
            clearInterval(interval);
          
            cambiar();
            
            
        } */

    }
    function innerHTML(){

        Horas.innerHTML= h;
        Minutos.innerHTML = ":" + m;
        Segundos.innerHTML = ":" + s;
    }
    function cambiar(){
    
       if(h>0 || m>0 || s>0){

        document.body.style.backgroundColor="green";
       }
       if(h==0 && m<amarillo && s>=0 || s<segundo){

        document.body.style.backgroundColor="yellow";
       }    
      if(h==00 && m ==00 && s==00){
         document.body.style.backgroundColor="red";   

         audioLoop();
      }

     
    }


    //---------------VALIDAR---NUMEROS-------------------------------------------

    //Validar solo numeros input
    function validar(e) {
        tecla = (document.all) ? e.keyCode : e.which;
        if (tecla==8) return true;
        patron = /\d/;
        te = String.fromCharCode(tecla);
        return patron.test(te);
    } 

    //focus al ingresar un numero
    function contar(obj,destino) {
      if (obj.value.length==obj.maxLength) destino.focus();
    }

/*---------------------Audio-----------------------------------------------------*/

    var audio=document.getElementById("musica");
    
    

    function audioLoop(){
      

      audio.autoplay=true;
      audio.load();

    }

function validarCampo(){

  if ( isNaN(h) || isNaN(m) || isNaN(s) ){

    alert("ingrese un número válido");

    location.reload();
  }
}

/*-------------FunCION--Boton--Continuar-------------*/

function Continuar()
    {

       /* h=parseInt(h.value);
        m=parseInt(m.value);
        s=parseInt(s.value);
        
        amarillo=parseInt(amarillo.value);

        segundo=parseInt(segundo.value);*/
        
         
       interval = setInterval(function(){
          setInter();
            
             innerHTML();
          
        },1000);
        document.getElementById("parar").disabled = false;
        document.getElementById("continuar").disabled = true;
    }

    
*{
    box-sizing: border-box;
}

body{
    background-image: url(../img/arbol.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    
    margin: 0;
    font-family: sans-serif;
   background-color:#edf5ff;
}
h2, .icon-menu{
    margin: 5px;
}
.header .contenedor{
    display: flex;
    justify-content: space-between;
}

.icon-menu{
    display: block;
    width: 40px;
    height: 40px;
    font-size: 30px;
    color:#204862;
    text-align: center;
    line-height: 45px;
    margin-left: auto;
    cursor: pointer;
}
.nav {
    position: absolute;
    top: 60px;
    left: -100%;
    width: 100%;
    transition: all 0.4s;
}
.mostrar{
    left: 0;
}
.ocultar{
    position: absolute;
    top: 60px;
    left: -100%;
    width: 100%;
    transition: all 0.4s;
}
.menu{
    list-style: none;
    padding:0;
    margin: 0;
}











.reloj{
    text-align: center;
    float: left;
    font-size: 112px;
    font-family: Courier,sans-serif;
    color: black;
}




#ama,  #seg {
    width: 40%;
    padding: 12px 20px;
    margin: 8px 0;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/*#demo{
    text-align:  center;
    color:black;
    position: absolute;
    top:200px;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    font-family: 'Orbitron', sans-serif;
    font-size: 10.5em;
    /*border: 1px solid #aaa;
}*/

/* Set a style for all buttons */
.btn-iniciar {
    width: auto;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    background-color: #204862;
}

.login{
    background-color: #204862;
    color: white;
    width: auto;
    padding: 8px 10px;
    margin-left: 2px;
    border: none;
    cursor: pointer;
    width: 20%;
}

.login:hover{
    background: white;
    color: #204862;
}


/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    background-color: #204862;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    padding-top: 60px;
}



input{
    
    border-radius: 4px;
    text-align: center;

}

/*Boton Stop Accion*/
.boton{
    background-color: #204862;
    color: white;
    padding: 8px 10px;
    margin-left: 2px;
    border: none;
    cursor: pointer;
    width: 20%;
    border-radius: 0px;
}

.boton:hover{
    background: white;
    color: #204862;
}
/* The Close Button (x) */


.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

footer{
  background: #fff;
  width: 100%;
  height: 50px;
  float: left;
  clear: both;
  bottom: 0;
  position: fixed;
  margin: 3px 0px;
  color: #19232f;

}

.copy{
  
  text-align: center;

}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */

@media (min-width:120px ) {

/* Full-width input fields */
#h, #m, #s {
    width: 26%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 94%; /* Could be more or less, depending on screen size */

}
    #digitos{
    margin: 150px auto;
    width: 300px;
    height: 115px;
    text-align: center;
}

    .reloj {
    text-align: center;
    float: left;
    font-size: 60px;
    font-family: Courier,sans-serif;
    color: black;
   

        }

    h2{
        text-align: center;
        font-family: Courier,sans-serif;
        color:black;
    }

.close{
    position: absolute;
    right: 10px;
    top: -15px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
    
}


@media (min-width: 320px ) {


/* Full-width input fields */
#h, #m, #s {
    width: 22%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}



/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 94%; /* Could be more or less, depending on screen size */

}
    #digitos{
    margin: 150px auto;
    width: 540px;
    height: 115px;
    text-align: center;
}
    .reloj {
    text-align: center;
    float: left;
    font-size: 65px;
    font-family: Courier,sans-serif;
    color: black;
        
    }
    h2{
        text-align: center;
        font-family: Courier,sans-serif;
        color:black;
    }
    .close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
    
}

@media(min-width:480px){

/* Full-width input fields */
#h, #m, #s {
    width: 12%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}


/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 94%; /* Could be more or less, depending on screen size */

}

    #digitos{
    margin: 150px auto;
    width: 540px;
    height: 115px;
    text-align: center;
}
    .reloj  {
    text-align: center;
    float: left;
    font-size: 80px;
    font-family: Courier,sans-serif;
    color: black;
        
    }
    h2{
         text-align: center;
        font-family: Courier,sans-serif;
        color: black;
    }

    .close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
}
@media(min-width:768px) {

    /* Full-width input fields */
#h, #m, #s {
    width: 12%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

    /* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 60%; /* Could be more or less, depending on screen size */

}

    #digitos{
    margin: 150px auto;
    width: 540px;
    height: 115px;
    text-align: center;
}

    .reloj  {
    float: left;
    font-size: 100px;
    font-family: Courier,sans-serif;
    color: black;
        
    }

    h2{
         text-align: center;
        font-family: Courier,sans-serif;
        color: black;
    }

    .close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
}

@media(min-width:1024px) {

/* Full-width input fields */
#h, #m, #s {
    width: 12%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 60%; /* Could be more or less, depending on screen size */

}
   
.nav{
    position: static;
    width: auto;
}
.menu{
    display: flex;
}

.icon-menu{
    display: none;
}

#digitos{
    margin: 250px auto;
    width: 890px;
    height: 215px;
    text-align: center;
}

.reloj {
    
    float: left;
    font-size: 185px;
    font-family: Courier,sans-serif;
    color: black;
    /*border: 1px solid #aaa;*/
}
h2{
    text-align: left;
    margin-top: 10px ;
    margin-left:2px;
    color: black;
}

.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<meta charset="UTF-8">
    <title>Temporizador</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/prueba.css">
<!--Icono Menu-->
<link href="https://file.myfontastic.com/CHkJoswBZU8cC99VGePWnS/icons.css" rel="stylesheet">

<script type="text/javascript" src="jquery/jquery-3.1.0.min.js"></script>
<body>
<!--<h1 id="demo">00:00:00</h1>-->
<header class="header">
	<div class="contenedor">
	<h2>Temporizador</h2>
		<span class="icon-menu" id="btn-menu"></span>
		<nav class="nav" id="nav">
			<ul class="menu">
				<li class="menu__link">
					<button onclick="document.getElementById('id01').style.display='block'" style="width:98%;" class="login">Menú</button>
				</li>
				<li class="menu__link">
					<input type="button" class="boton" id="parar" value="Pausar" onclick="parar();" style="width:98%;" disabled>
				</li>
				<li class="menu__link">
					<input type="button" class="boton" id="continuar" value="Continuar" onclick="Continuar()" style="width:98%;" disabled>
				</li>
				<li class="menu__link">
					<input type="button" class="boton" id="reinicio" value="Reiniciar" onclick="reinicio();" style="width:98%;" disabled>
				</li>
			</ul>
		</nav>
	</div>
</header>







<div id="id01" class="modal">
  
  <form onkeypress="return validar(event)" class="modal-content animate" action="action_page.php">
    <div class="imgcontainer"> 
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <!--<img src="img_avatar2.png" alt="Avatar" class="avatar">-->
    </div>

    <div class="container">
    <input type="text" maxlength="2" name="h" id="h" class="horas" onkeyup="contar(this,s)" value="0" placeholder="Hora" />
	<input type="text" maxlength="2" name="m" id="m" class="minutos" onkeyup="contar(this,h)" value="0" placeholder="Min" >
	<input type="text" maxlength="2" name="s" id="s" class="segundos" onkeyup="contar(this,m)" value="0" placeholder="Seg" autofocus="" >
	<input type="text" maxlength="2" name="ama" id="ama" placeholder="Minutos Color Amarillo"  onkeyup="contar(this,s)" >
	<input type="text" maxlength="2" name="seg" id="seg" placeholder="Segundos Color Amarillo"  onkeyup="contar(this,s)">
        
      <input type="button" onclick="contador_regresivo(),document.getElementById('id01').style.display='none'" class="btn-iniciar" id="btn-iniciar" value="Iniciar" /> 
     <audio src="Alerta.mp3" loop id="musica"></audio>
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
      
    </div>
  </form>
</div>
<div id="digitos">
	<div class="reloj" id="Horas">00</div>
	<div class="reloj" id="Minutos">:00</div>
	<div class="reloj" id="Segundos">:00</div>
</div>
<script type="text/javascript" src="js/prueba.js"></script>
<footer><p class="copy">&copy; Informática USS De la Patagonia - Todos los derechos </p></footer>
</body>
</html>

2
  • 2
    cual es el error? que te esta dando problemas?
    – sioesi
    Commented el 9 nov. 2016 a las 20:50
  • estoy realizando un temporizador y quiero hacer el botón de reinicio del contador, al momento de ingresar los valores, me reinicia pero se acelera demasiado el contador y no se en que parte estaré fallando. Commented el 14 nov. 2016 a las 13:31

1 respuesta 1

1

Tu problema esta en que tomas los valores ya asignados, los cuales estos van disminuyendo y al tomar nuevamente los valores con h=parseInt(h.value); estos ya no corresponden al elemento sino a la variable h,m,s, etc.; Entonces esto te reproduce el error NAN para evitar esto tendrás que volver a tomar los valores desde el input y tu función quedaría de la siguiente manera

function reinicio (){
  //...
  h=document.getElementById("h");
  m=document.getElementById("m");
  s= document.getElementById("s");
  //...
  clearInterval(interval);
  //ahora llamamos al contador regresivo
  contador_regresivo();
}
3
  • lo realice de esa manera y me toma los valores, pero hay algo que acelera demasiado el contador al darle el botón Reiniciar y mientras mas veces se presiona mas se acelera el contador. Commented el 14 nov. 2016 a las 13:29
  • @RodrigoVillarroelSoto tienes que limpiar la variable interval, ve la modificación que he hecho
    – JuankGlezz
    Commented el 15 nov. 2016 a las 0:03
  • muchas gracias por tu ayuda :) Commented el 15 nov. 2016 a las 11:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.