Skip to content

Instantly share code, notes, and snippets.

@LarsEliasNielsen

LarsEliasNielsen/countdown-plugin.jquery.js

Last active December 25, 2015 20:59
Show Gist options
  • Save LarsEliasNielsen/7038885 to your computer and use it in GitHub Desktop.
Save LarsEliasNielsen/7038885 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Countdown plugin
Raw
countdown-plugin.jquery.js
;(function( $ ){
$.extend($.fn, {
t2countdown: function(targetDate) {
// Initial variables
var target_date = new Date(targetDate).getTime();
var days, hours, minutes, seconds;
var countdown = this;
// DOM shortcut
var spans = $('#countdown-container #countdown-number');
// Reload every 1 sec.
var count = setInterval(function () {
// Time variables
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// Time calculation
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
formattedHours = (hours < 10) ? '0' + hours : hours;
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
formattedMinutes = (minutes < 10) ? '0' + minutes : minutes;
seconds = parseInt(seconds_left % 60);
formattedSeconds = (seconds < 10) ? '0' + seconds : seconds;
if (seconds_left >= 0) {
// Write to DOM
spans.children('#number-days').text(days);
spans.children('#number-hours').text(formattedHours);
spans.children('#number-minutes').text(formattedMinutes);
spans.children('#number-seconds').text(formattedSeconds);
} else {
// Removes countdown when overdue
$('#countdown-container').html('');
}
}, 1000);
}
});
})( jQuery );
Raw
countdown.style.css
html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial', sans-serif;
}
#countdown-container {
width: 480px;
display: inline-block;
}
#countdown-container p {
margin: 0;
text-align: center;
}
#countdown-container #countdown-label div,
#countdown-container #countdown-number div {
width: 118px;
display: block;
float: left;
margin: 0 1px;
text-align: center;
}
#countdown-container #countdown-label div {
min-height: 15px;
font-size: 12px;
background-color: #252528;
color: #ffffff;
letter-spacing: 2px;
}
#countdown-container #countdown-number div {
height: 65px;
font-size: 50px;
background-color: #ec2929;
color: #ffffff;
letter-spacing: 4px;
}
Raw
markup-template.html
<html>
<head>
<title>jQuery Countdown Plugin</title>
<link rel="stylesheet" href="css/countdown.style.css" />
<script src="js/jquery-1.5.2.js"></script>
<script src="js/countdown-plugin.jquery.js"></script>
<script>
jQuery(document).ready(function() {
// Run countdown
$('#countdown').t2countdown('2013-10-08 12:00:00');
});
</script>
</head>
<body>
<div id="countdown-container">
<p>Fristen udløber om:</p>
<div id="countdown-label">
<div id="label-days">DAGE</div>
<div id="label-hours">TIMER</div>
<div id="label-minutes">MINUTTER</div>
<div id="label-seconds">SEKUNDER</div>
</div>
<div id="countdown-number">
<div id="number-days">0</div>
<div id="number-hours">00</div>
<div id="number-minutes">00</div>
<div id="number-seconds">00</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment