<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codepad: Simple timer</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #EF2B2B;
font-family: sans-serif;
font-size: 14px;
line-height: 1.2;
color: #ffffff;
}
/* Timer */
#timer {
margin: 0;
padding: 0;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
#timer li.dot {
padding-top: 8px;
font-size: 32px;
}
#timer li {
display: inline-block;
text-align: center;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
vertical-align: top;
}
#timer li span {
display: block;
font-size: 48px;
}
</style>
</head>
<body>
<ul id="timer"></ul>
<script>
var getEndDate = new Date('02/22/2016 11:59 PM');
var getSeconds = 1000;
var getMinutes = getSeconds*60;
var getHours = getMinutes*60;
var getDays = getHours*24;
var getTimer = document.getElementById('timer')
var message = 'Time is out';
var timer;
function timerCountdown(){
var getNowDate = new Date();
var getSeparate = getEndDate-getNowDate;
if ( getSeparate < 0 ){
clearInterval(timer);
getTimer.innerHTML = '<li><span>'+ message +'</span></li>'
return false;
}
var seconds = Math.floor((getSeparate%getMinutes)/getSeconds);
var minutes = Math.floor((getSeparate%getHours)/getMinutes);
var hours = Math.floor((getSeparate%getDays)/getHours);
var days = Math.floor(getSeparate/getDays);
getTimer.innerHTML = '<li><span>'+ days + '</span>Days</li><li class="dot">:</li>';
getTimer.innerHTML += '<li><span>'+ hours + '</span>Hours</li><li class="dot">:</li>';
getTimer.innerHTML += '<li><span>'+ minutes + '</span>Minutes</li><li class="dot">:</li>';
getTimer.innerHTML += '<li><span>'+ seconds +'</span>Seconds</li>';
}
time = setInterval(timerCountdown, 1000);
</script>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.