This time I will share jQuery Plugin and tutorial about Minimal Stopwatch & Countdown App In jQuery – js-timer, hope it will help you in programming stack.
js-timer is a lightweight, nice-looking timer script that makes it simple to generate a stopwatch & countdown web app just in a minute.
Your users will get notified when the countdown is completely finished. And the digital color of the countdown timer will automatically change as the remaining time decreases.
How to use it:
1. Load the necessary JavaScript and CSS files in the document.
1 |
<link rel="stylesheet" href="./css/style.css"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="./js/script.js"></script> |
2. Create the HTML for the Stopwatch & Countdown app.
02 |
<input type="number" id="num" min="0"> |
04 |
<option value="0">Select Unit</option> |
05 |
<option value="s">Seconds</option> |
06 |
<option value="m">Minutes</option> |
07 |
<option value="h">Hours</option> |
11 |
<div class="buttons-wrapper"> |
12 |
<button id="start-cronometer">Start Stopwatch</button> |
13 |
<button id="start-countdown">Start Countdown</button> |
16 |
<div class="clock-wrapper"> |
17 |
<span class="hours">00</span> |
18 |
<span class="dots">:</span> |
19 |
<span class="minutes">00</span> |
20 |
<span class="dots">:</span> |
21 |
<span class="seconds">00</span> |
24 |
<div class="buttons-wrapper"> |
25 |
<button id="resume-timer">Resume Timer</button> |
26 |
<button id="stop-timer">Stop Timer</button> |
27 |
<button id="reset-timer">Reset Timer</button> |
This awesome jQuery plugin is developed by gfoliver. For more Advanced Usages, please check the demo page or visit the official website.
