Press "Enter" to skip to content

[Stopwatch] Count Up Timer With Using Vanilla JS and Jquery

Counter-Up-Timer is an easy and small countdown/stopwatch web app which is a web app built on jQuery and HTML5 local storage surface. It works continuously in the background, regardless of how you switch between pages and browser tabs until you click the pause button.

countup timer jquery, javascript count up timer start stop, javascript count up timer hours minutes seconds, javascript count up timer from date, javascript timer countdown with seconds, count up timer html

Features:

  • The counter stays until the URL changes.
  • Has the Ajax method preset for storing time data?
  • This counter uses the browser’s local storage so there is no delay.
  • Notification animation has been added here.

How to make use of it:

1. Create the HTML for the stopwatch.

<div class="countup" id="stopwatch">
  <span id="hour" class="timeel hours">00</span>
  <span class="timeel timeRefHours">hours</span>
  <span id="min" class="timeel minutes">00</span>
  <span class="timeel timeRefMinutes">minutes</span>
  <span id="sec" class="timeel seconds">00</span>
  <span class="timeel timeRefSeconds">seconds</span>
</div>

2. Create a start/stop button after the stopwatch.

<button class="timer_button" id="start_button">Start</button>
<button class="timer_button" id="timer_submit">Stop</button>

3. Create an empty container for full-time carry.

<div id="total_time"></div>

4. Download the basic script after the jQuery library.

<script src="jquery.min.js"></script>
<script src="script.js"></script>

5. Custom stopwatch types.

.timer_button{
  width: 100px;
  height: 50px;
}

.countup {
  text-align: center;
  margin-bottom: 20px;
}

.countup .timeel {
  display: inline-block;
  padding: 10px;
  background: #151515;
  margin: 0;
  color: white;
  min-width: 2.6rem;
  margin-left: 13px;
  border-radius: 10px 0 0 10px;
}

.countup span[class*="timeRef"] {
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  background: #e8c152;
  color: black;
}

Counter-Up-Timer Plugin/Github, jquery stopwatch example, countdown timer using local storage, jquery stopwatch, jquery countdown timer, javascript stopwatch, jquery timer, stopwatch with local storage

Count-Up-Timer-Demo


See Demo And Download

Official Website(Tahsin-Ahmed52225): Click Here

This superior jQuery/javascript plugin is developed by Tahsin-Ahmed52225. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *