Last active
August 29, 2015 14:17
-
-
Save lorashfuko/643244cdf2edfe92d5d0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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">: </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">: </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">: </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