SV-Countdown
sv-countdown-js is a vanilla JavaScript countdown plugin with no dependencies. Pass in an HTML element (such as that returned from document.querySelector
) that will be used as a wrapper for the countdown, plus an object containing the configuration, and the plugin will set up a table showing days/hours/minutes/seconds until your event.
Example usage
<div id="countdown"></div>
<script src="/path/to/sv-countdown.js"></script>
<script>
let wrapper = document.querySelector('#countdown');
let countdown = new SV.Countdown(wrapper, {
year: 2025,
month: 12,
day: 25,
untilMessage: 'Countdown to December 25th 2025',
endMessage: 'It happened!'
});
</script>
Configuration
The following options can be passed in the second parameter to SV.Countdown
:
-
year
(required): the year of the event -
month
(required): the month of the event -
day
(required): the day of the event -
showSeconds
(optional): whether to show the seconds column (default:true
); if set to false then the time runs once per minute instead -
untilMessage
(optional): a message, shown as a table caption, that describes what you're counting down to -
endMessage
(optional): a message to show once the countdown has reached zero -
tableClass
(optional): an additional class to add to the table element
Note: to make things easier the month provided should be 1-indexed, i.e. January is 1, February is 2 etc. This is in contrast to JS itself which uses 0-indexed months - the plugin takes care of using the right index.
Styling
A sample stylesheet is provided in demo/sample.css
which can be used as a starting point. These are the classes that get applied to the table and related elements:
-
.sv-cd-timer
- the table itself -
.sv-cd-days
- the table cell showing the number of days -
.sv-cd-hours
- the cell showing hours -
.sv-cd-mins
- the cell showing minutes -
.sv-cd-secs
- the cell showing seconds -
.sv-cd-until
- the<caption>
element on the table showing the description fromuntilMessage
; thecaption-side
property can be used to put this above or below the table -
.sv-cd-blastoff
- the element that replaces the table and shows the message fromendMessage