I'm doing a timer in JavaScript and I want to program the Reset button to save the value entered in the example input: Hours = 0, Minutes = 20, seconds = 0 When I start the counting start from 00:20:00, so on
Thank you very much
$(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">×</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">© Informática USS De la Patagonia - Todos los derechos </p></footer>
</body>
</html>