+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Обратный отсчёт. Таймер обратного отсчета

В этой статье мы рассмотрим несколько вариантов таймеров.

1 вариант.
Простой таймер использующий только минуты и секудны
<script language="JavaScript" type="text/javascript">
<!--
// выставляем секунды
var sec=05;
// выставляем минуты
var min=00;

function refresh()
{
sec--;
if(sec==-01){sec=59; min=min-1;}
else{min=min;}
if(sec<=9){sec="0" + sec;}
time=(min<=9 ? "0"+min : min) + ":" + sec;
if(document.getElementById){timer.innerHTML=time;}
inter=setTimeout("refresh()", 1000);
// действие, если таймер 00:00
if(min=='00' && sec=='00'){
sec="00";
clearInterval(inter);
/* выводим сообщение в элемент с id="tut", например <div id="tut"></div> */
tut.innerHTML="Таймер завершил свою работу!";

/* либо модальное окно */
//alert('Таймер завершил свою работу!');

/* либо переход на какой-то адрес */
//window.location='http://www.net-f.ru/';

/* либо любой другой Ваш код */
}
}
//-->
</script>

Чтобы таймер появился, необходимо элементу придать идентификатор timer и добавить условие в тег <BODY>
<body onload="refresh();">
<span id="timer"></span>
Всё, таймер готов.

2 вариант.
Цифрами для таймера будет служить картинка. Также в этом таймере помимо минут и секунд доступны часы и дни. Наш таймер будет отсчитывать время до определенного дня.
Для работы нам понадобится библиотека jquery и файл jquery.countdown.js

Оформляем страницу
<!doctype html>
<html><head>
<title>Таймер обратного отсчета</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.countdown.js" type="text/javascript"></script>
</head>
<body>
Для отображения времени будет использоваться картинка digits2_orange.png

Далее пишем js код
<script type="text/javascript">
// здесь нужная дата в формате гггг-мм-дд чч:мм:сс
var deadline='2017-08-20 00:00:00';
var t=Date.parse(deadline)-Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));

$(function(){
$('#counter').countdown({
image: 'pic/digits2_orange.png',
startTime: days+':'+hours+':'+minutes+':'+seconds,
timerEnd: function(){
$("#tut").html('Таймер завершил свою работу');
}
});
});
</script>
image - наша картинка
startTime - это как раз время оставшееся до 01.09.2017
timerEnd - то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись
Далее наш таймер
<div id="layer">
<h1>Осталось:</h1>
<div id="counter"></div>
<div class="desc">
<div id="days">Дней</div><div id="hours">Часов</div><div id="minutes">Минут</div><div id="seconds">Секунд</div>
</div>
<br style="clear:both;">
<span id="tut" style="color:#c70000;"></span>
</div>
</body>
</html>
Оформляем
#layer{
width:600px;
text-align:center;
margin:0 auto;}

#counter{
margin:10pt auto 0 auto;
width:414px;}

.desc{
width:430px;
margin:0px auto;}

#days,#hours,#minutes,#seconds{
float:left;
font:13px Arial,Verdana,sans-serif;
width:50px;
margin-right:63px;
font-weight:bold;
color:#000;}

#seconds{margin-right:0px;}

.cntSeparator {
font-size:50px;
margin:6px 7px;
color:#000;}

3 вариант.
На наш взгляд самый удобный. Также как и предыдущий показывает оставшееся количество дней, часов, минут, секунд. Не использует изображение для отображения счетчика.
Для работы нам понадобится библиотека jquery и файл jquery.downCount.js

Оформляем страницу
<!doctype html>
<html><head>
<title>Таймер обратного отсчета</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.downCount.js" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">
// здесь нужная дата в формате гггг-мм-дд чч:мм:сс
var deadline='2017-08-20 00:00:00';
</script>

<ul class="countdown">
<li>
<span class="days">00</span>
<div class="days_ref">дни</div>
</li>
<li class="seperator">.</li>
<li>
<span class="hours">00</span>
<div class="hours_ref">часы</div>
</li>
<li class="seperator">:</li>
<li>
<span class="minutes">00</span>
<div class="minutes_ref">мин</div>
</li>
<li class="seperator">:</li>
<li>
<span class="seconds">00</span>
<div class="seconds_ref">сек</div>
</li>
</ul>
<script type="text/javascript">
$('.countdown').downCount({
date: deadline,
},
function(){
/* действие после завершения таймера */
alert("Время истекло!");
});
</script>
</body>
</html>
И css для оформления внешнего вида
.countdown{
list-style:none;
margin:6px 0 0 0;
padding:0;
display: block;}

.countdown li{display: inline-block;}

/* здесь дни, часы, минуты, секунды */
.countdown li span{
width:100%;
color:#000;
font:18px Verdana;
display:inline-block;}

/* разделители . и : */
.countdown li.seperator {
color:#000;
font:16px Verdana;
vertical-align:top;}

.countdown li div{
margin:0;
color: #a7abb1;
font:8pt Verdana;}


Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 221