Demonstration of the jQuery plug-in written by Keith Wood. This timer counts down until New Year's day of the following year.
A Pen by Andrew Mitchell Barfield on CodePen.
Demonstration of the jQuery plug-in written by Keith Wood. This timer counts down until New Year's day of the following year.
A Pen by Andrew Mitchell Barfield on CodePen.
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>jQuery Countdown</title> | |
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'> | |
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'> | |
</head> | |
<body> | |
<div id="countdown"> | |
</div> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
<script src="http://keith-wood.name/js/jquery.plugin.js"></script> | |
<script src="http://keith-wood.name/js/jquery.countdown.js"></script> | |
</body> | |
</html> |
$(function () { | |
var today = new Date(); | |
newYearsDay = new Date(today.getFullYear() + 1, 0, 1, 0, 0, 0, 0); | |
$('#countdown').countdown({until: newYearsDay}); | |
}); |
html { | |
height:100%; | |
} | |
body { | |
height:100%; | |
top:0; | |
position:relative; | |
font-family:Oswald,sans-serif; | |
background:#000; | |
color:#fff; | |
font-size:15px; | |
line-height:19px; | |
margin:0; | |
padding:0; | |
} | |
.countdown-row { | |
display:block; | |
padding: 30px; | |
} | |
.countdown-section { | |
float:left; | |
display:block; | |
} | |
.countdown-section>span { | |
display:block; | |
} | |
.countdown-section+.countdown-section { | |
margin-left:60px; | |
} | |
.countdown-section .countdown-amount { | |
font-size:100px; | |
line-height:112px; | |
font-weight:700; | |
margin-bottom:24px; | |
} | |
.countdown-section .countdown-period { | |
text-transform:uppercase; | |
font-weight:300; | |
font-size:20px; | |
line-height:15px; | |
letter-spacing:6px; | |
} |