Temporizador de cuenta ascendente de JavaScript
-
Use las funciones
setInterval()yMathpara mostrar el temporizador de cuenta ascendente de JavaScript -
Use las funciones
setInterval()ypad()para mostrar el temporizador de cuenta ascendente de JavaScript -
Use
jQuerypara mostrar el temporizador de conteo de JavaScript - Usar objetos y propiedades para mostrar el temporizador de conteo de JavaScript
Este tutorial le presenta el temporizador de cuenta ascendente de JavaScript. Utiliza las funciones y objetos setInterval(), pad(), clearInterval() y Math.floor() para crear un temporizador de cuenta progresiva.
También ilustra cómo jQuery puede ayudarlo a optimizar su código.
Use las funciones setInterval() y Math para mostrar el temporizador de cuenta ascendente de JavaScript
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
Código CSS:
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
Código JavaScript:
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
Producción:
En este ejemplo de código, la función setInterval() llama a la función countUpTimer() cada segundo (1 segundo = 1000 milisegundos). En la función countUpTimer(), la variable totalSeconds primero se incrementa en 1 y luego se usa para la conversión en hour, minute y seconds.
Después de eso, se selecciona el primer elemento cuyo valor de identificación es count_up_timer. El contenido HTML (innerHTML) se reemplazó con el temporizador (hour:minute:seconds). El temporizador de cuenta progresiva se detendrá tan pronto como haga clic en el botón Stop Timer.
La función setInterval() llama a una función en un intervalo dado. Se necesitan dos parámetros, y ambos son obligatorios. El primer parámetro es una función y el otro es un intervalo en milisegundos.
Sin embargo, el método setInterval() sigue llamando a la función hasta que se cierra la ventana o se llama a la función clearInterval(). Devuelve el id del tiempo que podemos usar con la función clearInterval() para detener el temporizador.
La propiedad .innerHTML devuelve o modifica el contenido HTML del elemento especificado. El Math.floor() devolverá el número entero más grande (menor o igual que el número dado).
Use las funciones setInterval() y pad() para mostrar el temporizador de cuenta ascendente de JavaScript
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
Código CSS:
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
Código JavaScript:
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
document.getElementById('seconds').innerHTML = pad(++second % 60);
document.getElementById('minutes').innerHTML = pad(parseInt(second / 60, 10));
}, 1000);
Producción:
En este código de ejemplo, la función pad() agrega un cero inicial. Comprueba si el valor que se le pasa es un solo dígito (menor o igual a 9), luego agrega un cero inicial, de lo contrario no.
La función setInterval() llama a la función dada en un intervalo particular. El intervalo debe estar en milisegundos. Puede visitar este enlace para leer.
Luego, el setInterval() llamará a una función anónima para obtener los elementos cuyos valores de identificación son seconds y minutes. Esta función anónima reemplaza el innerHTML (Contenido HTML) con el valor devuelto por la función pad().
La función parseInt() analiza el argumento de cadena dado y devuelve un número entero de particular radix.
Use jQuery para mostrar el temporizador de conteo de JavaScript
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Count Up Timer For One Hour</h1>
<div id = "timer">
<span id="minutes"></span>:<span id="seconds"></span>
</div>
</body>
</html>
Código CSS:
#timer{
font-size:100px;
color:green;
margin-left:80px;
}
Código JavaScript:
var second = 0;
function pad(value) {
return value > 9 ? value : '0' + value;
}
setInterval(function() {
$('#seconds').html(pad(++second % 60));
$('#minutes').html(pad(parseInt(second / 60, 10)));
}, 1000);
Producción:
¿Qué pasa si quiere un cero inicial pero no quiere usar la función pad() y la biblioteca jQuery? Entonces, la siguiente solución es para usted.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="count_up_timer">00:00:00</div>
<button id="stop_count_up_timer" onclick="clearInterval(timerVariable)">Stop Time</button>
</body>
</html>
Código CSS:
#count_up_timer{
font-size: 100px;
font-weight: bold;
color: darkblue;
}
#stop_count_up_timer{
background-color:black;
color:white
}
Código JavaScript:
var timerVariable = setInterval(countUpTimer, 1000);
var totalSeconds = 0;
function countUpTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
if (hour < 10) hour = '0' + hour;
if (minute < 10) minute = '0' + minute;
if (seconds < 10) seconds = '0' + seconds;
document.getElementById('count_up_timer').innerHTML =
hour + ':' + minute + ':' + seconds;
}
Producción:
En el código anterior, las declaraciones if se utilizan para verificar hour, minute y seconds. Se agregará un cero inicial si son menos de 10 (eso significa que son de un solo dígito); de otra forma no.
Es posible que haya notado que todos los temporizadores de cuenta ascendente que aprendimos comienzan tan pronto como se ejecuta el código. ¿Qué pasa si podemos tener control total sobre el temporizador de cuenta ascendente de JavaScript? Aprendamos eso también.
Usar objetos y propiedades para mostrar el temporizador de conteo de JavaScript
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Count Up Timer in JavaScript</title>
</head>
<body>
<div id="timer">
<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="control">
<button id="startbtn">START</button>
<button id="pausebtn">PAUSE</button>
<button id="resumebtn">RESUME</button>
<button id="resetbtn">RESET</button>
</div>
</body>
</html>
Código CSS:
#timer{
font-size: 100px;
font-weight: bold;
}
#control>#startbtn{
background-color:green;
color:white;
}
#control>#pausebtn{
background-color:blue;
color:white;
}
#control>#resumebtn{
background-color:orange;
color:white;
}
#control>#resetbtn{
background-color:red;
color:white;
}
Código JavaScript:
var Clock = {
totalSeconds: 0,
startTimer: function() {
if (!this.interval) {
var self = this;
function pad(val) {
return val > 9 ? val : '0' + val;
}
this.interval = setInterval(function() {
self.totalSeconds += 1;
document.getElementById('minutes').innerHTML =
pad(Math.floor(self.totalSeconds / 60 % 60));
document.getElementById('seconds').innerHTML =
pad(parseInt(self.totalSeconds % 60));
}, 1000);
}
},
resetTimer: function() {
Clock.totalSeconds = null;
clearInterval(this.interval);
document.getElementById('minutes').innerHTML = '00';
document.getElementById('seconds').innerHTML = '00';
delete this.interval;
},
pauseTimer: function() {
clearInterval(this.interval);
delete this.interval;
},
resumeTimer: function() {
this.startTimer();
},
};
document.getElementById('startbtn').addEventListener('click', function() {
Clock.startTimer();
});
document.getElementById('pausebtn').addEventListener('click', function() {
Clock.pauseTimer();
});
document.getElementById('resumebtn').addEventListener('click', function() {
Clock.resumeTimer();
});
document.getElementById('resetbtn').addEventListener('click', function() {
Clock.resetTimer();
});
Producción:
Aquí, creamos un objeto llamado Reloj que tiene 5 propiedades denominadas totalSeconds, startTimer, resetTimer, pauseTimer y resumeTimer. El valor de cada propiedad es una función anónima con su propio cuerpo de función.
La palabra clave this se refiere a un objeto al que pertenece y siempre contiene la referencia para un objeto.
Por ejemplo, this.resumeTimer significa propiedad resumeTimer del objeto this (Reloj).
La función clearInterval() se utiliza para detener el temporizador de cuenta progresiva. Recuerde que cada propiedad del objeto Clock funcionará en el evento de clic.
