Simple Responsive Countdown Timers with jQuery HQ Plugin

HQ Countdown Timer is a lightweight jQuery plugin that creates precise countdown timers for web applications.

It runs multiple independent timers on a single page and supports custom target dates through data attributes.

The responsive design adapts to different screen sizes, and you can apply custom styles and animations to match your website's theme.

The plugin calculates and displays time remaining to specified target dates across days, hours, minutes, and seconds. You can implement countdown timers for:

• Product launches and pre-orders
• Limited-time sales and promotions 
• Event registration deadlines
• Live stream countdowns
• Contest end times

How to use it:

1. Include jQuery and the HQ Countdown Timer script on your webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/hq-countdown-timer.min.js"></script>

2. Create the HTML structure for your countdown timer. The core element is a div with the class hq-countdown. Crucially, set the target date and time using the data-target-date attribute. The date and time should be in ISO 8601 format (YYYY-MM-DDTHH:mm:ss).

<div class="hq-countdown" data-target-date="2025-12-31T23:59:59">
  <div class="hq-countdown-item">
    <div class="hq-number hq-days">00</div>
    <div class="hq-label">Days</div>
  </div>
  <div class="hq-countdown-item">
    <div class="hq-number hq-hours">00</div>
    <div class="hq-label">Hours</div>
  </div>
  <div class="hq-countdown-item">
    <div class="hq-number hq-minutes">00</div>
    <div class="hq-label">Minutes</div>
  </div>
  <div class="hq-countdown-item">
    <div class="hq-number hq-seconds">00</div>
    <div class="hq-label">Seconds</div>
  </div>
</div>

3. Initialize the countdown timer using jQuery. You can customize the timer with options such as endMessage to display when the countdown finishes, and onEnd to execute a function when the timer reaches zero.

$('.hq-countdown').hqCountdownTimer({
  endMessage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"/></svg> Countdown Completed!',
  onEnd: function() {
    console.log('Countdown finished!');
  }
});

4. If you need to use different CSS selectors for the timer elements, you can configure them during initialization. The following options let you customize the selectors:

$('.hq-countdown').hqCountdownTimer({
  daysSelector: '.hq-days',
  hoursSelector: '.hq-hours',
  minutesSelector: '.hq-minutes',
  secondsSelector: '.hq-seconds',
  endedClass: 'hq-ended',
});

5. style the countdown timer to match your website's design using CSS. The CSS example below provides a modern glassmorphism style with a gradient background and responsive adjustments. You can override and modify the CSS styles to fit your specific aesthetic preferences.

:root {
  --primary: #6366f1;
  --secondary: #8b5cf6;
  --glass: rgba(255, 255, 255, 0.1);
  --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.hq-countdown {
  display: flex;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(145deg, var(--primary), var(--secondary));
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.hq-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem;
  background: var(--glass);
  border-radius: 1rem;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.hq-countdown-item:hover {
  transform: translateY(-5px);
}

.hq-number {
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #fff, #e0e7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hq-label {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* Ended state */
.hq-ended {
  background: linear-gradient(145deg, #ef4444, #dc2626);
  animation: pulse 1.5s infinite;
}

.hq-ended .hq-countdown-item {
  background: rgba(255, 255, 255, 0.15);
}

.hq-countdown-ended {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.hq-number {
  transition: transform 0.3s ease;
}

.hq-number-update {
  transform: scale(1.1);
  opacity: 0.8;
}

/* Responsive design */
@media (max-width: 768px) {
  .hq-countdown {
      flex-direction: column;
      gap: 1rem;
      padding: 1.5rem;
  }
  .hq-countdown-item {
      padding: 1rem;
  }
  .hq-number {
      font-size: 2.5rem;
  }
}

How it works:

• Initialization: When you initialize the plugin on a .hq-countdown element, it reads the data-target-date attribute to determine the countdown's end date.
• Timer Interval: It sets up a JavaScript setInterval function that executes every second (1000 milliseconds).
• Time Calculation: Inside the interval, it gets the current time using Date.now() and calculates the difference (distance) between the target date and the current time.
• Time Units: It then calculates the remaining days, hours, minutes, and seconds from the distance.
• Updating Display: The plugin updates the text content of the elements selected by daysSelector, hoursSelector, minutesSelector, and secondsSelector with the calculated time values, padding single-digit numbers with a leading zero to maintain a consistent two-digit format.
• End Condition: If the distance is less than 0, meaning the target date has passed, the interval is cleared using clearInterval(timer). The plugin then adds the endedClass to the countdown container, sets the HTML content to display the endMessage, and executes the onEnd callback function if provided.
• This process repeats every second, providing a live, updating countdown timer on your webpage.

---

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