ejemplos - temporizador de cuenta simple en javascript
javascript html (12)
@Cybernate, estaba buscando el mismo guión hoy gracias por su aporte. Sin embargo, lo cambié solo un poco por jQuery ...
function clock(){
$(''body'').prepend(''<div id="clock"><label id="minutes">00</label>:<label id="seconds">00</label></div>'');
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime()
{
++totalSeconds;
$(''#clock > #seconds'').html(pad(totalSeconds%60));
$(''#clock > #minutes'').html(pad(parseInt(totalSeconds/60)));
}
function pad(val)
{
var valString = val + "";
if(valString.length < 2)
{
return "0" + valString;
}
else
{
return valString;
}
}
}
$(document).ready(function(){
clock();
});
la parte de css:
<style>
#clock {
padding: 10px;
position:absolute;
top: 0px;
right: 0px;
color: black;
}
</style>
Estoy buscando un temporizador de cuenta simple en javascript. Todos los guiones que encuentro son "todos cantando todos bailando". Solo quiero un temporizador de conteo sin jQuery gratuito y mínimo que se muestre en minutos y segundos. Gracias.
Aquí hay una versión React (Native):
import React, { Component } from ''react'';
import {
View,
Text,
} from ''react-native'';
export default class CountUp extends Component {
state = {
seconds: null,
}
get formatedTime() {
const { seconds } = this.state;
return [
pad(parseInt(seconds / 60)),
pad(seconds % 60),
].join('':'');
}
componentWillMount() {
this.setState({ seconds: 0 });
}
componentDidMount() {
this.timer = setInterval(
() => this.setState({
seconds: ++this.state.seconds
}),
1000
);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<View>
<Text>{this.formatedTime}</Text>
</View>
);
}
}
function pad(num) {
return num.toString().length > 1 ? num : `0${num}`;
}
Aquí hay uno que usa .padStart() :
<!DOCTYPE html>
<html lang=''en''>
<head>
<meta charset=''UTF-8'' />
<title>timer</title>
</head>
<body>
<span id="minutes">00</span>:<span id="seconds">00</span>
<script>
const minutes = document.querySelector("#minutes")
const seconds = document.querySelector("#seconds")
let count = 0;
const renderTimer = () => {
count += 1;
minutes.innerHTML = Math.floor(count / 60).toString().padStart(2, "0");
seconds.innerHTML = (count % 60).toString().padStart(2, "0");
}
const timer = setInterval(renderTimer, 1000)
</script>
</body>
</html>
El método padStart () rellena la cadena actual con otra cadena (repetida, si es necesario) para que la cadena resultante alcance la longitud dada. El relleno se aplica desde el inicio (izquierda) de la cadena actual.
El siguiente código funciona como un temporizador de cuenta atrás. Es un código JavaScript puro que muestra la hour:minute:second . También tiene un botón de DETENER:
<div id="timer"></div>
<div id ="stop_timer" onclick="clearInterval(timerVar)">Stop time</div>
var timerVar = setInterval(countTimer, 1000);
var totalSeconds = 0;
function countTimer() {
++totalSeconds;
var hour = Math.floor(totalSeconds /3600);
var minute = Math.floor((totalSeconds - hour*3600)/60);
var seconds = totalSeconds - (hour*3600 + minute*60);
document.getElementById("timer").innerHTML = hour + ":" + minute + ":" + seconds;
}
Extendiéndose desde @Chandu, con un poco de UI agregado:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<style>
button {
background: steelblue;
border-radius: 4px;
height: 40px;
width: 100px;
color: white;
font-size: 20px;
cursor: pointer;
border: none;
}
button:focus {
outline: 0;
}
#minutes, #seconds {
font-size: 40px;
}
.bigger {
font-size: 40px;
}
.button {
box-shadow: 0 9px #999;
}
.button:hover {background-color: hotpink}
.button:active {
background-color: hotpink;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<body align=''center''>
<button onclick=''set_timer()'' class=''button''>START</button>
<button onclick=''stop_timer()'' class=''button''>STOP</button><br><br>
<label id="minutes">00</label><span class=''bigger''>:</span><label id="seconds">00</label>
</body>
</html>
<script>
function pad(val) {
valString = val + "";
if(valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
totalSeconds = 0;
function setTime(minutesLabel, secondsLabel) {
totalSeconds++;
secondsLabel.innerHTML = pad(totalSeconds%60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}
function set_timer() {
minutesLabel = document.getElementById("minutes");
secondsLabel = document.getElementById("seconds");
my_int = setInterval(function() { setTime(minutesLabel, secondsLabel)}, 1000);
}
function stop_timer() {
clearInterval(my_int);
}
</script>
Se ve de la siguiente manera:
Jugueteó con el código de Bakudan y otro código en para obtener todo en uno. Lo siento, usa jquery, pero es muy simple de usar. Tiene una opción para pausar, luego reanudarlo.
Actualizado: Se agregaron más opciones. Ahora comienza, pausa, reanuda, reinicia y reinicia. Mezcle las funciones para obtener los resultados deseados.
Fiddle aquí: https://jsfiddle.net/wizajay/rro5pna3/
<span id="min">00</span>:<span id="sec">00</span>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">
<input id="restartButton" type="button" value="Restart">
var Clock = {
totalSeconds: 0,
start: function () {
var self = this;
function pad(val) { return val > 9 ? val : "0" + val; }
this.interval = setInterval(function () {
self.totalSeconds += 1;
$("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
$("#sec").text(pad(parseInt(self.totalSeconds % 60)));
}, 1000);
},
reset: function () {
Clock.totalSeconds = null;
clearInterval(this.interval);
$("#min").text("00");
$("#sec").text("00");
},
pause: function () {
clearInterval(this.interval);
delete this.interval;
},
resume: function () {
if (!this.interval) this.start();
},
restart: function () {
this.reset();
Clock.start();
}
};
$(''#startButton'').click(function () { Clock.start(); });
$(''#pauseButton'').click(function () { Clock.pause(); });
$(''#resumeButton'').click(function () { Clock.resume(); });
$(''#resetButton'').click(function () { Clock.reset(); });
$(''#restartButton'').click(function () { Clock.restart(); });
Mira esto:
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
<label id="minutes">00</label>:<label id="seconds">00</label>
Nota: incluya siempre jQuery antes de escribir scripts jQuery
Paso 1: la función setInterval se llama cada 1000ms (1s)
Stpe2: en esa función. Incrementa los segundos
Paso 3: verifica las condiciones
<span id="count-up">0:00</span>
<script>
var min = 0;
var second = 00;
var zeroPlaceholder = 0;
var counterId = setInterval(function(){
countUp();
}, 1000);
function countUp () {
second++;
if(second == 59){
second = 00;
min = min + 1;
}
if(second == 10){
zeroPlaceholder = '''';
}else
if(second == 00){
zeroPlaceholder = 0;
}
document.getElementById("count-up").innerText = min+'':''+zeroPlaceholder+second;
}
</script>
Solo quería poner mis 2 centavos. Modifiqué la función de @Ajay Singh para manejar la cuenta regresiva y contar. Aquí hay un recorte del jsfiddle.
var countDown = Math.floor(Date.now() / 1000)
runClock(null, function(e, r){ console.log( e.seconds );}, countDown);
var t = setInterval(function(){
runClock(function(){
console.log(''done'');
clearInterval(t);
},function(timeElapsed, timeRemaining){
console.log( timeElapsed.seconds );
}, countDown);
}, 100);
Temporizador para jQuery: más pequeño, más funcional, probado.
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
$("#seconds").html(pad(++sec%60));
$("#minutes").html(pad(parseInt(sec/60,10)));
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="minutes"></span>:<span id="seconds"></span>
JavaScript puro:
var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }
setInterval( function(){
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
}, 1000);
<span id="minutes"></span>:<span id="seconds"></span>
Actualizar:
Esta answer muestra cómo rellenar.
Detención de setInterval MDN se logra con clearInterval MDN
var timer = setInterval ( function(){...}, 1000 );
...
clearInterval ( timer );
Tuve que crear un cronómetro para que los maestros evaluaran el trabajo de los estudiantes. Este es uno que utilicé, que se basa completamente en el tiempo transcurrido desde la graduación iniciada almacenando la hora del sistema en el punto en que se cargó la página, y luego comparándola cada medio segundo con la hora del sistema en ese punto:
var startTime = Math.floor(Date.now() / 1000); //Get the starting time (right now) in seconds
localStorage.setItem("startTime", startTime); // Store it if I want to restart the timer on the next page
function startTime() {
var now = Math.floor(Date.now() / 1000); // get the time now
var diff = now - startTime; // diff in seconds between now and start
var m = Math.floor(diff / 60); // get minutes value (quotient of diff)
var s = Math.floor(diff % 60); // get seconds value (remainder of diff)
m = checkTime(m); // add a leading zero if it''s single digit
s = checkTime(s); // add a leading zero if it''s single digit
document.getElementById("idName").innerHTML( m + ":" + s ); // update the element where the timer will appear
var t = setTimeout(startTime, 500); // set a timeout to update the timer
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
startTime();
De esta forma, realmente no importa si el ''setTimeout'' está sujeto a retrasos en la ejecución, el tiempo transcurrido es siempre relativo a la hora del sistema cuando comenzó por primera vez, y la hora del sistema en el momento de la actualización.
Vea estas soluciones: