Skip to content

Instantly share code, notes, and snippets.

@lorashfuko
Last active August 29, 2015 14:17
Show Gist options
  • Save lorashfuko/643244cdf2edfe92d5d0 to your computer and use it in GitHub Desktop.
Save lorashfuko/643244cdf2edfe92d5d0 to your computer and use it in GitHub Desktop.
jQuery(document).ready(function () {
//код jQuery
//функция вызова таймера
function get_timer() {
//Дата для обратного отсчета
var date_new = new Date(2015,3,12);
//Объект даты для обратного отсчета
var date_t = new Date(date_new);
//Объект текущей даты
var date = new Date();
//Вычесляем сколько миллисекунд пройдет
//от текущей даты до даты отсчета времени
var timer = date_t - date;
//Проверяем не нужно ли закончить отсчет
//если дата отсчета еще не истекла, то количество
//миллисекунд в переменной date_t будет больше чем в переменной date
if(date_t > date) {
//Вычисляем сколько осталось дней до даты отсчета.
//Для этого количество миллисекунд до даты остчета делим
//на количество миллисекунд в одном дне
var day = parseInt(timer/(60*60*1000*24));
//если полученное число меньше 10 прибавляем 0
if(day < 10) {
day = '0' + day;
}
//Приводим результат к строке
day = day.toString();
//Вычисляем сколько осталось часов до даты отсчета.
//Для этого переменную timer делим на количество
//миллисекунд в одном часе и отбрасываем дни
var hour = parseInt(timer/(60*60*1000))%24;
//если полученное число меньше 10 прибавляем 0
if(hour < 10) {
hour = '0' + hour;
}
//Приводим результат к строке
hour = hour.toString();
//Вычисляем сколько осталось минут до даты отсчета.
//Для этого переменную timer делим на количество
//миллисекунд в одной минуте и отбрасываем часы
var min = parseInt(timer/(1000*60))%60;
//если полученное число меньше 10 прибавляем 0
if(min < 10) {
min = '0' + min;
}
//Приводим результат к строке
min = min.toString();
//Вычисляем сколько осталось секунд до даты отсчета.
//Для этого переменную timer делим на количество
//миллисекунд в одной минуте и отбрасываем минуты
var sec = parseInt(timer/1000)%60;
//если полученное число меньше 10 прибавляем 0
if(sec < 10) {
sec = '0' + sec;
}
//Приводим результат к строке
sec = sec.toString();
//Выводим дни
//Проверяем какие предыдущие цифры времени должны вывестись на экран
//Для десятков дней
if(day[1] == 9 &&
hour[0] == 2 &&
hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation(jQuery("#day0"),day[0]);
}
else {
jQuery("#day0").html(day[0]);
}
//Для единиц дней
if(hour[0] == 2 &&
hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation(jQuery("#day1"),day[1]);
}
else {
jQuery("#day1").html(day[1]);
}
//Выводим часы
//Проверяем какие предыдущие цифры времени должны вывестись на экран
//Для десятков часов
if(hour[1] == 3 &&
min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation(jQuery("#hour0"),hour[0]);
}
else {
jQuery("#hour0").html(hour[0]);
}
//Для единиц чассов
if(min[0] == 5 &&
min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation(jQuery("#hour1"),hour[1]);
}
else {
jQuery("#hour1").html(hour[1]);
}
//Выводим минуты
//Проверяем какие предыдущие цифры времени должны вывестись на экран
//Для десятков минут
if(min[1] == 9 &&
sec[0] == 5 &&
sec[1] == 9) {
animation(jQuery("#min0"),min[0]);
}
else {
jQuery("#min0").html(min[0]);
}
//Для единиц минут
if(sec[0] == 5 && sec[1] == 9) {
animation(jQuery("#min1"),min[1]);
}
else {
jQuery("#min1").html(min[1]);
}
//Выводим секунды
//Проверяем какие предыдущие цифры времени должны вывестись на экран
//Для десятков секунд
if(sec[1] == 9) {
animation(jQuery("#sec0"),sec[0]);
}
else {
jQuery("#sec0").html(sec[0]);
}
animation(jQuery("#sec1"),sec[1]);
//Переодически вызываем созданную функцию,
//интервал вызова одна секунда(1000 милли секунд)
setTimeout(get_timer,1000);
}
else {
//jQuery("#clock").html("<span id='stop'>Отсчет закончен!!!</span>");
jQuery("#pasha2015").remove("#pasha2015");
}
}
//Функция для красивого отображения времени.
function animation(vibor,param) {
vibor.html(param)
.css({'marginTop':'-20px','opacity':'0'})
.animate({'marginTop':'0px','opacity':'1'});
}
//Вызываем функцию на исполнение
get_timer();
});
// HTML
<div id="pasha2015">
<h2><span style="color: #ffffff; font-family: 'arial black', 'avant garde'; font-size: 18pt;">ПАСХА 12 апреля</span>
</h2>
<h3><span style="color: #ffffff; font-family: 'arial black', 'avant garde'; font-size: 18pt;">Успей заказать памятник до Пасхи</span>
</h3>
<div id="timer_wrap">
<div id="clock">
<div id="day">
<p id="day0">2</p>
<p id="day1">9</p>
</div>
<div class="razd">
<p class="day">Дней</p>
</div>
<div id="hour">
<p id="hour0">1</p>
<p id="hour1">2</p><span class="razd">:&nbsp;&nbsp;</span>
</div>
<div class="razd">
<p class="hour">Часов</p>
</div>
<div id="min">
<p id="min0">0</p>
<p id="min1">0</p><span class="razd">:&nbsp;&nbsp;</span>
</div>
<div class="razd">
<p class="min">Мин.</p>
</div>
<div id="sec">
<p id="sec0" style="margin-top: 0px; opacity: 1;">2</p>
<p id="sec1" style="margin-top: 0px; opacity: 1;">2</p><span class="razd">:&nbsp;&nbsp;</span>
</div>
<div class="razd">
<p class="sec">Сек.</p>
</div>
</div>
</div>
</div>
//CSS
#hour,#min,#sec,#day {
float:left;
padding:5px;
width:48px;
height:55px;
position:relative;
display:block;
}
#day0, #day1,
#sec1, #sec0,
#min1, #min0,
#hour1, #hour0 {
margin:0px;
padding:0px;
width:24px;
height:55px;
float:left;
color:#ffffff;
color:#C08512;
font-size:3em;
font-weight:bold;
position:absolute;
}
#pasha2015 {
max-width: 580px;
margin: 0 auto;
background: #B11413;
padding: 15px 0;
box-shadow: inset 0 0 7px 6px #111114;
}
#pasha2015 h2, #pasha2015 h3 {
text-align: center;
}
#pasha2015 p.min {
font-size: 13px;
margin-left: -45px;
margin-top: -15px;
color:#ffffff;
}
#pasha2015 p.hour {
font-size: 13px;
margin-left: -46px;
color:#ffffff;
margin-top: -15px;
}
#pasha2015 p.day {
font-size: 13px;
margin-left: -39px;
color:#ffffff;
margin-top: -15px;
}
#pasha2015 p.sec {
font-size: 13px;
margin-left: 257px;
margin-top: -80px;
color:#ffffff;
}
#sec1,#min1,#hour1,#day1 {
margin-left:24px;
}
#timer_wrap {
background-color:#515151;
background: #B11413;
-moz-border-radius:10px;
height:96px;
max-width:340px;
padding:15px 18px;
margin: 0 auto;
}
#clock {
border:1px solid white;
-moz-border-radius:10px;
height:75px;
width:298px;
padding:20px 20px 0px 20px;
position:absolute;
box-shadow: 1px 1px 17px 1px #121214;
}
.razd {
float:left;
color:#ffffff;
color: #C08512;
font-weight:bold;
font-size:3em;
margin:10px 16px 0px -3px;
}
#stop {
color:white;
font-size:2em;
margin:15px 10px 10px 25px;
position:absolute;
}
/*********************************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment