Blaze UI es un conjunto de herramientas de interfaz de usuario que ayuda a los desarrolladores a crear sitios web mantenibles mediante el uso de sus componentes. Todos sus componentes son móviles primero y se escalan en consecuencia según el tamaño de la pantalla.
En este artículo, veremos los métodos de contador de Blaze UI. Hay cinco métodos de contador que se enumeran a continuación.
1 . Método start() : este método se utiliza para iniciar el control deslizante mediante programación. Este método no acepta ningún parámetro y devuelve vacío.
Sintaxis:
document.querySelector(".selector").start();
Ejemplo 1: Este ejemplo muestra el uso del método start() para iniciar el contador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blaze UI - Counter Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Methods - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
id="counter1"
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
<div class="u-window-box-large">
<button class="c-button" onclick="startCounter()">
Start Counter
</button>
</div>
</div>
<script>
function startCounter(){
document.querySelector("#counter1").start();
}
</script>
</body>
</html>
Producción:
2. Método reset(): este método se utiliza para restablecer el contador al valor de inicio inicial. Este método no acepta ningún parámetro y devuelve vacío.
Sintaxis:
document.querySelector(".selector").reset();
Ejemplo 2: El siguiente ejemplo muestra el uso del método counter reset() para restablecer el contador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blaze UI - Counter Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Methods - reset() - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
id="counter1"
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
<div class="u-window-box-large">
<button class="c-button" onclick="startCounter()">
Start Counter
</button>
<button class="c-button" onclick="resetCounter()">
Reset Counter
</button>
</div>
</div>
<script>
function startCounter(){
document.querySelector("#counter1").start();
}
function resetCounter(){
document.querySelector("#counter1").reset();
}
</script>
</body>
</html>
Producción:
3. Método de reinicio(): este método reinicia el contador y lo inicia de nuevo inmediatamente. Este método tampoco acepta parámetros y devuelve vacío.
Sintaxis:
document.querySelector(".selector").restart();
Ejemplo 3: El siguiente ejemplo muestra el uso del método counter restart() para reiniciar el contador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blaze UI - Counter Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Methods - restart() - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
id="counter1"
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
<div class="u-window-box-large">
<button class="c-button" onclick="startCounter()">
Start Counter
</button>
<button class="c-button" onclick="restartCounter()">
Restart Counter
</button>
</div>
</div>
<script>
function startCounter(){
document.querySelector("#counter1").start();
}
function restartCounter(){
document.querySelector("#counter1").restart();
}
</script>
</body>
</html>
Producción:
4. Método pauseResume(): Este método se utiliza para pausar/reanudar el contador. Este método no acepta ningún parámetro y devuelve vacío.
Sintaxis:
document.querySelector(".selector").pauseResume();
Ejemplo 4: este ejemplo muestra el uso del método pauseResume() para pausar y reanudar el contador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blaze UI - Counter Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Methods - pauseResume() - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
id="counter1"
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
<div class="u-window-box-large">
<button class="c-button" onclick="startCounter()">
Start Counter
</button>
<button class="c-button" onclick="pauseResumeCounter()">
Pause/Resume Counter
</button>
</div>
</div>
<script>
function startCounter(){
document.querySelector("#counter1").start();
}
function pauseResumeCounter(){
document.querySelector("#counter1").pauseResume();
}
</script>
</body>
</html>
Producción:
5. Método update(): Este método se utiliza para actualizar el valor final del contador al valor dado. También inicia el contador si está en pausa/parado. Este método acepta un parámetro de tipo número, que es el valor a configurar en el contador. Este método también devuelve vacío como todos los métodos de contador.
Sintaxis:
document.querySelector(".selector").update();
Ejemplo 5: Este ejemplo muestra el uso del método update() para actualizar el valor final del contador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Blaze UI - Counter Methods</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Counter Methods - update() - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<blaze-counter
class="u-super"
id="counter1"
start-value="0"
end-value="100"
duration="5"
decimals="2"
delay="1000">
</blaze-counter>
<div class="u-window-box-large">
<button class="c-button" onclick="startCounter()">
Start Counter
</button>
<button class="c-button" onclick="updateCounter(10)">
Update Counter to 10
</button>
</div>
</div>
<script>
function startCounter(){
document.querySelector("#counter1").start();
}
function updateCounter(num){
document.querySelector("#counter1").update(num);
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/counter/