Blaze UI Counter Methods
Last Updated :
24 Apr, 2022
Blaze UI is a user interface toolkit that helps developers to build maintainable websites by using its components. All of its components are mobile-first and scale accordingly based on screen size.
In this article, we will be seeing Blaze UI counter Methods. There are five counter methods which are listed below.
1. start() Method: This method is used to start the slider programmatically. This method accepts no parameter and returns void.
Syntax:
document.querySelector(".selector").start();
Example 1: This example shows the use of the start() method to start the counter.
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=
<script type="module" src=
</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>
|
Output:
2. reset() Method: This method is used to reset the counter to the initial start value. This method accepts no parameter and returns void.
Syntax:
document.querySelector(".selector").reset();
Example 2: The below example shows the use of the counter reset() method to reset the counter.
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=
<script type="module" src=
</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>
|
Output:
3. restart() Method: This method resets the counter and starts it again immediately. This method also accepts no parameters and returns void.
Syntax:
document.querySelector(".selector").restart();
Example 3: The below example shows the use of the counter restart() method to restart the counter.
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=
<script type="module" src=
</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>
|
Output:
4. pauseResume() Method: This method is used to pause/resume the counter. This method accepts no parameter and returns void.
Syntax:
document.querySelector(".selector").pauseResume();
Example 4: This example shows the use of the pauseResume() method to pause and resume the counter.
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=
<script type="module" src=
</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>
|
Output:
5. update() Method: This method is used to update the final counter value to the given value. It also starts the counter if it is paused/stopped. This method accepts a parameter of type number, which is the value to set on the counter. This method also returns void like all the counter methods.
Syntax:
document.querySelector(".selector").update();
Example 5: This example shows the use of the update() method to update the final value of the counter.
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=
<script type="module" src=
</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>
|
Output:
Reference: https://www.blazeui.com/components/counter/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...