Retro 7-segment Countdown & Countup Timer - jQuery TickWatch

TickWatch is a tiny jQuery plugin for creating customizable countdown or countup timers that resemble retro 7-segment clocks.

The plugin offers several options, methods, and events for creating and managing timers. You can set timers to count up or down, specify start and end times, and customize the appearance of the clock segments.

This flexibility and customizability make TickWatch suitable for various web projects, including countdowns for events, timers for games, or tracking elapsed time in applications.

How to use it:

1. To start, include jQuery library and the TickWatch plugin's JS & CSS files in your HTML document.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- TickWatch Plugin -->
<link rel="stylesheet" href="dist/style.css">
<script src="dist/TickWatch.min.js"></script>

2. Next, create an empty div that will serve as the container for your timer.

<div class="timer">
</div>

3. Initialize the TickWatch plugin and set the timer's initial parameters. In this example, we'll create a countdown timer with a starting time of 00:00:05:

const timerElement = $('.timer');
timerElement.TickWatch({
  direction: 'down',
  startTime: "00:00:05",
})

4. Trigger a function when the timer reaches its end. In this case, we'll display an alert popup:

timerElement.on('TickWatch.end',function(){
  alert('End!')
})

5. TickWatch offers several options to customize the appearance and behavior of your timers. These include:

timerElement.TickWatch({

  // options and defaults
  direction: 'up',
  startTime: null,
  endTime: null,
  activeCellClass: 'active-cell',
  inactiveCellClass: 'inactive-cell'
  partsKeys: ['seconds', 'minutes', {hours: 24}]

  // display mode
  displayOnly: false,
  displaySize: 10, 
  
})

6. Control the timer using the following API methods:

// start & resume
timerElement.TickWatch('start');

// pause
timerElement.TickWatch('stop');

// set time
timerElement.TickWatch('set', time);

// get the current value
timerElement.TickWatch('get');

// change options
timerElement.TickWatch('option', key, value);

// clear
timerElement.TickWatch('clear');

// destroy
timerElement.TickWatch('clear');

7. The plugin also triggers various events at specific points in the timer's lifecycle, such as start, stop, update, clear, and destroy. You can utilize these events to execute custom logic based on the timer's state:

timerElement.on('TickWatch.start', function(){
  // do something
});

timerElement.on('TickWatch.stop', function(){
  // do something
});

timerElement.on('TickWatch.update', function(){
  // do something
});

timerElement.on('TickWatch.end', function(){
  // do something
});

timerElement.on('TickWatch.clear', function(){
  // do something
});

timerElement.on('TickWatch.destroy', function(){
  // do something
});

Changelog:

2024-06-29

• typescript types added for last option

2024-06-27

• Add the get method

2024-06-19

• Added Display mode

2024-06-19

• v1.0.2

---

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