Count Down To A Date With Custom Until/End Messages – sv-countdown

Preview:

Description:

A Vanilla JavaScript countdown clock that counts down to a specific date with custom styles and until/end messages.

How to use it:

1. Create a container to hold the countdown clock.

<div id="countdown"></div>

2. Insert the sv-countdown.js file into the document.

<script src="sv-countdown.js"></script>

3. Set a countdown by specifying the year, month, and day as follows:

var countdown = new SV.Countdown('#countdown', {
    year: 2025,
    month: 12,
    day: 24
});

4. Customize the messages to display when the countdown is running or is fishined.

var countdown = new SV.Countdown('#countdown', {
    year: 2025,
    month: 12,
    day: 24,
    untilMessage: 'Countdown to Dec 24 2025',
    endMessage: 'Ended!'
});

5. Add a CSS class to the countdown clock. As a result, you can customize the countdown clock via CSS.

var countdown = new SV.Countdown('#countdown', {
    year: 2025,
    month: 12,
    day: 24,
    tableClass: 'myClass'
});

6. Or apply your own CSS styles to the countdown clock.

.svcd-timer {
  width: 100%;
  margin-bottom: 8px;
}
.svcd-timer th {
  color: #666;
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
}
.svcd-days, .svcd-hours, .svcd-mins, .svcd-secs {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #0a0;
}
.svcd-days {
  color: #990;
}
.svcd-blastoff {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.svcd-until {
  margin: 0;
  font-size: 13px;
  text-align: center;
}