Skip to content

Instantly share code, notes, and snippets.

@ijason
Created September 17, 2012 20:00
Show Gist options
  • Save ijason/3739433 to your computer and use it in GitHub Desktop.
Save ijason/3739433 to your computer and use it in GitHub Desktop.
Simple jquery countdown script
<script type="text/javascript">
//assuming you have a div with a countdown id: <div id="countdown"></div>
var startNumber = 5;
var size = 150;
var intervalTimer, newSize;
$(function () {
//set defaults
$('#countdown').text(startNumber); //set start number
$('#countdown').css('font-size', size + 'px'); //set default font size
$('#countdown').css('height', size + 'px'); //set div height to prevent it from resizing with shrinking text
$('#countdown').css('text-align', 'center'); //keep the text centered withint the div so text fades out accordingly
newSize = size;
//begin countdown
Countdown();
});
function Countdown() {
clearInterval(intervalTimer); //clear timer
newSize = size; //reset size to shrink text
$('#countdown').css('font-size', size + 'px'); //set font size back to default
if (startNumber > 0) {
intervalTimer = setInterval(function () { shrinkText() }, 100); //begin shrink timer
$('#countdown').fadeOut(1000, function () {
startNumber = startNumber - 1;
$('#countdown').text(startNumber);
$('#countdown').show();
Countdown();
});
}
}
function shrinkText() {
newSize = newSize - 15;
$('#countdown').css('font-size', newSize + 'px');
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment