Skip to content

Instantly share code, notes, and snippets.

@codingfox-rus

codingfox-rus/Time-counter.html

Last active August 29, 2015 14:05
Show Gist options
  • Save codingfox-rus/e760ea1704e639309c02 to your computer and use it in GitHub Desktop.
Save codingfox-rus/e760ea1704e639309c02 to your computer and use it in GitHub Desktop.
Download ZIP
Простейший счетчик обратного отсчета (дни-часы-минуты-секунды). Может использоваться в лендингах как заготовка
Raw
Time-counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Счетчик обратного отсчета</title>
<style>
#container {
margin: 0 auto;
width: 30%;
}
#datetime-counter {
margin: 0 auto;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<table id="datetime-counter">
<tr>
<td id="days"></td>
<td id="hours"></td>
<td id="minutes"></td>
<td id="seconds"></td>
</tr>
</table>
</div>
<script>
// Будущее время для обратного отсчета, месяц начинается с нуля (это особенность объекта Date)
var futureDate = new Date(2014, 7, 31, 0, 0, 0);
function count() {
var now = new Date();
var days = Math.floor((futureDate - now) / 86400000);
days = (days < 10) ? "0" + days : days;
var hours = 24 - now.getHours() - 1;
hours = (hours < 10) ? "0" + hours : hours;
var minutes = 60 - now.getMinutes() - 1;
minutes = (minutes < 10) ? "0"+minutes : minutes;
var seconds = 60 - now.getSeconds() - 1;
seconds = (seconds < 10) ? "0"+seconds : seconds;
document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
}
count();
setInterval(count, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment