Countdown to Christmas
Add this awesome Countdown to Christmas code to your website or blog to remind visitors of the upcoming holidays.
Countdown to Christmas
HTML with CSS and JavaScript
<html>
<head>
<style>
p{
font-size:46px;
text-align:center;
color:red;
}
h2{
text-align:center;
color:green;
font-size:46px;
}
#d1{
background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f7/Christmas_lights_0424.jpg")
}
</style>
</head>
<body>
<div id="d1">
<h2>Countdown to Christmas</h2>
<p id="cd"></p>
</div>
<script>
var christmas = new Date("Dec 25, 2018").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = christmas - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("cd").innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("cd").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
Comments
Post a Comment