JSFiddle - React, Tailwind, and code Playground
by Amar Nyayapati
HTML
<script src="jquery.js"></script>
<script>
var end = new Date('11/01/2014 10:00 AM');
var sec = 1000;
var min = sec * 60;
var hr = min * 60;
var day = hr * 24;
var timer;
$(document).ready(function(){
timer = setInterval(remaining, 1000);
});
function remaining() {
var now = new Date();
var diff = end - now;
if (!diff) {
clearInterval(timer);
$('#countdown').html('YIPEE!!!');
return;
}
var days = Math.floor(diff / day);
var hours = Math.floor((diff % day) / hr);
var minutes = Math.floor((diff % hr) / min);
var seconds = Math.floor((diff % min) / sec);
$('#countdown').html(days +" "+ 'days ');
$('#countdown2').html(hours +" "+ 'hrs ');
$('#countdown3').html(minutes +" "+ 'mins ');
$('#countdown4').html(seconds +" "+ 'secs ');
}
</script>
<span>COUNT DOWN</span>
<div id="main">
<div id="countdown" ></div>
<div id="countdown2" ></div>
<div id="countdown3" ></div>
<div id="countdown4" ></div>
</div>
<style>
#main{
position: absolute;
}
#countdown{
font-weight:bold;
left:50px;
top:50px;
position:absolute;
padding:15px;
border:1px solid black;
color:#08F708;
background:#272780;
}
#countdown2{
font-weight:bold;
left:114px;
top:50px;
position:absolute;
padding:15px;
border:1px solid black;
color:#08F708;
background:#272780;
}
#countdown3{
font-weight:bold;
left:169px;
top:50px;
position:absolute;
padding:15px;
border:1px solid black;
color:#08F708;
background:#272780;
}
#countdown4{
font-weight:bold;
left:234px;
top:50px;
position:absolute;
...