Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Countup and Countdown

Countup and Countdown

A countdown to a specific date that animates up from 0 and then starts the countdown.

A Pen by Nikita Dudnik on CodePen.

License.

<span id="container">
<div id="title">COUNTDOWN TO TRYSIL</div>
<ul id="countdown">
<li id="days">
<div class="number">00</div>
<div class="label">Days</div>
</li>
<li id="hours">
<div class="number">00</div>
<div class="label">Hours</div>
</li>
<li id="minutes">
<div class="number">00</div>
<div class="label">Minutes</div>
</li>
</ul>
</span>
/* --------------------------
* GLOBAL VARS
* -------------------------- */
// The date you want to count down to
var targetDate = new Date("2016/12/25 00:00:00");
// Other date related variables
var days;
var hrs;
var min;
var sec;
/* --------------------------
* ON DOCUMENT LOAD
* -------------------------- */
$(function() {
// Calculate time until launch date
timeToLaunch();
// Transition the current countdown from 0
numberTransition('#days .number', days, 1000, 'easeOutQuad');
numberTransition('#hours .number', hrs, 1000, 'easeOutQuad');
numberTransition('#minutes .number', min, 1000, 'easeOutQuad');
numberTransition('#seconds .number', sec, 1000, 'easeOutQuad');
// Begin Countdown
setTimeout(countDownTimer,1001);
});
/* --------------------------
* FIGURE OUT THE AMOUNT OF
TIME LEFT BEFORE LAUNCH
* -------------------------- */
function timeToLaunch(){
// Get the current date
var currentDate = new Date();
// Find the difference between dates
var diff = (currentDate - targetDate)/1000;
var diff = Math.abs(Math.floor(diff));
// Check number of days until target
days = Math.floor(diff/(24*60*60));
sec = diff - days * 24*60*60;
// Check number of hours until target
hrs = Math.floor(sec/(60*60));
sec = sec - hrs * 60*60;
// Check number of minutes until target
min = Math.floor(sec/(60));
sec = sec - min * 60;
}
/* --------------------------
* DISPLAY THE CURRENT
COUNT TO LAUNCH
* -------------------------- */
function countDownTimer(){
// Figure out the time to launch
timeToLaunch();
// Write to countdown component
$( "#days .number" ).text(days);
$( "#hours .number" ).text(hrs);
$( "#minutes .number" ).text(min);
$( "#seconds .number" ).text(sec);
// Repeat the check every second
setTimeout(countDownTimer,1000);
}
/* --------------------------
* TRANSITION NUMBERS FROM 0
TO CURRENT TIME UNTIL LAUNCH
* -------------------------- */
function numberTransition(id, endPoint, transitionDuration, transitionEase){
// Transition numbers from 0 to the final number
$({numberCount: $(id).text()}).animate({numberCount: endPoint}, {
duration: transitionDuration,
easing:transitionEase,
step: function() {
$(id).text(Math.floor(this.numberCount));
},
complete: function() {
$(id).text(this.numberCount);
}
});
};
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, html {
height: 100%;
display: grid;
background-color: #000;
background: url(https://www.trysil.com/contentassets/eec237e129724d59ae77a9aed343412d/trysil-sentrum.jpg);
}
span { /* thing to center */
margin: auto;
}
#title {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 48px;
text-align: center;
color: #fff;
}
ul#countdown {
position: relative;
margin: 0 auto;
padding: 15px 0 20px 0;
color: #fff;
overflow: hidden;
font-family: 'Arial Narrow', Arial, sans-serif;
li {
margin: 0 -3px 0 0;
padding: 0;
display: inline-block;
width: 33%;
font-size: 72px;
font-size: 6vw;
text-align: center;
.label {
color: #fff;
font-size: 18px;
font-size: 1.5vw;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.