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

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

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;}

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

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

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

Опубликовано: 10 августа 2017 | Просмотров: 35752