Count Up Timer (Stopwatch) Using jQuery And Local Storage

An easy and tiny count up timer (also called stopwatch) web app built on top of jQuery and HTML5 local storage.

It runs continuously in the background, no matter how you switch between pages and the browser's tabs, until you click the stop button.

How to use 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 start/stop buttons next to 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 to hold the total time.

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

4. Load the main script after jQuery library.

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

5. Custom styles for the stopwatch.

.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;
}

---

This awesome jQuery plugin is developed by Tahsin-Ahmed52225. For more Advanced Usages, please check the demo page or visit the official website.