Temporizador de conteo de JavaScript
Cómo implementar un temporizador de cuenta en JavaScript?
Los siguientes enfoques se pueden utilizar para implementar un temporizador de conteo en JavaScript:
- "setInterval ()" y "Matemáticas.piso()" Métodos.
- "setInterval ()" y "parseint ()" Métodos.
- "jQuery" Acercarse.
En la sección a continuación, los enfoques mencionados se ilustrarán uno por uno!
Enfoque 1: Implemente un temporizador de conteo en JavaScript utilizando el setinterval () y las matemáticas.Métodos de piso ()
El "setInterval ()El método "se aplica para establecer un intervalo de tiempo específico sobre una función específica para ejecutar y el"Matemáticas.piso()El método "devuelve el valor entero más cercano. Estos métodos se pueden implementar para aplicar un intervalo de tiempo a una función particular y realizar cálculos precisos para la ejecución adecuada del temporizador.
Sintaxis
setInterval (función, milisegundos)En la sintaxis anterior:
- "función"Se refiere a la función en la que se aplicará el intervalo de tiempo y"milisegundos"Señala el intervalo de tiempo establecido.
El "Matemáticas.piso()"El método toma el"valor"Ser formateado como su parámetro.
Ejemplo
Revise el siguiente fragmento de código para comprender el concepto declarado:
00:00:00
En la demostración anterior,
- Especifique el encabezado que contiene el formato del temporizador de recuento.
- Después de eso, cree un botón con un adjunto "al hacer clic"Redirección de eventos a la función"ClearInterval ()"Método que tiene la variable"Temporizador"Pasó como su parámetro que contiene el"setInterval ()" método. Esto dará como resultado la eliminación del intervalo de tiempo establecido en el clic del botón.
Ahora, revise el siguiente fragmento de código JavaScript:
var segundos = 0VAR TIMER = SetInterval (Uptimer, 1000);
function uptimer ()
++segundos;
var hora = matemáticas.piso (segundos / 3600);
Var minuto = matemáticas.piso ((segundos - hora * 3600) / 60);
var updsecond = segundos - (hora * 3600 + minuto * 60);
documento.getElementById ("Contup").innerhtml = hora + ":" + minuto + ":" + upsecond;
En el código anterior:
- Inicializar los segundos con "0". Además, aplique el método SetInterval () en la función Uptimer () con un intervalo de tiempo de "1000"Milisegundos.
- Después de eso, defina una función llamada "Uptimer ()". En su definición, calcule el "hora"Al dividirlo por el número de segundos en una hora y devolver el valor entero más cercano usando el"Matemáticas.piso()" método.
- Del mismo modo, calcule las actas dividiendo la resta de ambos (los segundos pasados en el temporizador y el número de segundos en una hora) por los minutos totales en una hora.
- El cálculo para incrementar los segundos en el temporizador se calculará en el último paso.
- Todos los enfoques discutidos anteriormente pueden ser evidentes de la siguiente manera:
Trabajo del temporizador:
Enfoque 2: Implemente un temporizador de cuenta en JavaScript utilizando los métodos setInterval () y parseInt ()
El "setInterval ()El método "se aplica de manera similar para establecer un intervalo de tiempo específico sobre una función particular para ejecutar y el"parseint ()El método analiza un valor como una cadena y devuelve el primer entero. Estos métodos se pueden implementar de manera que la función se ejecute en un intervalo particular y muestra el recuento de temporizador analizando los dígitos correctamente en ella.
Sintaxis
setInterval (función, milisegundos)En la sintaxis anterior:
- "función"Se refiere a la función en la que se aplicará el intervalo de tiempo y"milisegundos"Señala el intervalo de tiempo establecido.
En la sintaxis dada:
- "cadena"Se refiere a la cadena a analizar.
- "base"El valor es"10" por defecto
Ejemplo
La demostración a continuación explica el concepto declarado:
Temporizador de cuenta por una hora
= "minutos"> minutos: = "segundos"> segundos
En el código HTML anterior:
- Dentro de ""Etiqueta, especifique el encabezado.
- Después de eso, incluya el ""Etiqueta para acumular el temporizador de recuento aquí con respecto al formato especificado para"minutos" y "segundos".
Ahora, pase por el siguiente fragmento de código JS:
var segundo = 0;function uptimer (count) return count> 9 ? recuento: "0" + recuento;
setInterval (function ()
documento.getElementById ("segundos").innerhtml = uptimer (++ segundo % 60);
documento.getElementById ("minutos").innerhtml = Uptimer (parseint (segundo / 60, 10));
, 1000);
En esta parte del código:
- Inicializar el "segundos"Con 0.
- Después de eso, defina la función llamada "Uptimer ()".
- Esta función agrega un cero líder y aplica una verificación si el valor que se le pasa es un solo dígito I.E (<9). In such a case, it adds a leading zero.
- El "setInterval ()"Método con un intervalo establecido de"1000"MS se aplicará al código adicional. Aquí, el especificado "durarEl elemento de los segundos y las actas se accederán respectivamente.
- Para "segundos", Los segundos inicializados se incrementan y los 60 puntos al límite final para segundos. Después de eso, se pasan como un parámetro a la función uptimer () y se muestran en el DOM como un tiempo de amplio en el tramo discutido antes.
- Del mismo modo, en el caso de "minutos", Calcula las actas. Además, aplique el "parseint ()Método para analizar las actas. El primer parámetro en el método indica la transición del minuto en el segundo i.E 60. El segundo parámetro como se describe en la sintaxis se establece de forma predeterminada en 10
Ejecutar el código anterior producirá los siguientes resultados en el navegador:
Se puede observar desde la salida que el temporizador de recuento funciona perfectamente.
Enfoque 3: Implemente un temporizador de cuenta en JavaScript utilizando el enfoque jQuery
En este enfoque, jQuery se puede aplicar utilizando sus métodos para realizar el requisito dado.
Sintaxis
$ (selector).html ()En la sintaxis dada:
- "selector" se refiere a "identificación"Contra el elemento HTML.
Ejemplo
Las siguientes líneas de código explican el concepto declarado.
Temporizador de cuenta durante 30 minutos
= "minutos"> minutos: = "segundos"> segundos
En el ejemplo anterior,
- Primero, incluya el "jQuery" biblioteca.
- Ahora, de manera similar, repita el enfoque discutido anteriormente para especificar el "minutos" y "segundos" en el "" etiqueta.
function uptimer (count) return count> 9 ? recuento: "0" + recuento;
setInterval (function ()
$ ("#segundos").html (upttimer (++ segundo % 60));
$ ("#minutos").html (uptimer (parseint (segundo / 30, 10)));
, 1000);
En el código JS anterior:
- Del mismo modo, inicialice los segundos con "0".
- Ahora, declare una función llamada "Uptimer ()".
- En su definición, revive los pasos para aplicar una verificación del número de dígitos.
- Del mismo modo, aplique el "setInterval ()"Método con un"1000"Intervalo de tiempo de milisegundos en la función especificada.
- Aquí, aplique el jQuery "html ()"Método para devolver el contenido (InnerHtml) de los elementos refiriéndose a ellos como"segundos", y "minutos"Respectivamente.
Producción
En este artículo, se ilustran todos los enfoques para crear un temporizador de conteo.
Conclusión
La combinación de "setInterval ()" y "Matemáticas.piso()"Métodos, el"setInterval ()" y "parseint ()"Métodos o el"jQueryEl enfoque se puede utilizar para implementar un temporizador de conteo utilizando JavaScript. El setinterval () y las matemáticas.Los métodos de piso () se pueden implementar para aplicar un intervalo de tiempo específico a una función particular y realizar cálculos precisos para la ejecución adecuada del temporizador. Los métodos setInterval () y parseInt () se pueden usar para ejecutar una función a intervalos específicos repetidamente y mostrar el recuento de temporizador correctamente. El enfoque jQuery se puede aplicar para integrar el elemento HTML y realizar la funcionalidad requerida. Este artículo demostró a la implementación de un temporizador de cuenta en JavaScript.