Блог

Таймер для сайта

  • Евгений Ц.
  • Нет комментариев

Для одного из проектов мне потребовался таймер обратного отсчета, во время действия которого посетитель может сделать заказ со скидкой. Таймер должен продолжать отсчет при переходах по страницам сайта и по кокнчании работы не появляться повторно в течение определённого времени.

Поискав в Сети мне удалось найти только варианты с подключаемым внешним скриптом, но ничего из этого мне не подошло, поэтому предлагаю своё решение.

За основу был взят этот таймер. И вот, что в итоге получилось:

HTML

<!-- Подключаем jquery и плагин таймера -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.time-to.min.js"></script>
<script type="text/javascript" src="js/timer.js"></script>
<link rel="stylesheet" href="css/timeTo.css" type="text/css">
<link rel="stylesheet" href="css/timer.css" type="text/css">
<!-- Добавляем блок таймера -->
<div class="counter" style="display:none">
	<div class="wrapper">
		<h3>До конца акции осталось:</h3>
		<div id="countdown-1"></div>
	</div>
</div>

Скрипты должны быть подключены на всех страницах сайта, где должен отображаться таймер. Их можно добавить в шаблон или вставлять через плагин.

timer.js

$(document).ready(function () {
	var workTime = 30; //Время работы таймера в секундах
	var startPeriod = 24; //Время до повторного показа таймера в часах
	var timeNow = parseInt(new Date().getTime() / 1000); // Текущее время unixtime
	var timerClose = parseInt(localStorage.getItem('timerClose')); //unixtime когда таймер должен закрыться
	var nextStart = parseInt(localStorage.getItem('nextStart')); //unixtime следующего запуска таймера
	if (!nextStart || nextStart < timeNow) {
		nextStart = parseInt(timeNow + startPeriod * 3600 + workTime);
		localStorage.setItem('nextStart', nextStart);
		timerClose = timeNow + workTime;
		localStorage.setItem('timerClose', timerClose);
	} else if ((timerClose - timeNow) < 1) {
		return;
	}
	addDiscount();
	showCounter(timerClose - timeNow);
});
function showCounter(sec) {
	$('.counter').css({
		"display": "block"
	});
	$('#countdown-1').timeTo({
		seconds: sec,
		displayHours: false,
		theme: "black",
		fontSize: 36,
		callback: function () {
			removeDiscount();
			removeCounter();
		}
	});
}
function addDiscount() { // При старте таймера функция добавляет скрытое поле во все формы на странице
	$('form').each(function () {
		$(this).append('<input type="hidden" class="discount" name="discount" value="Заказ по акции">');
	});
}
function removeDiscount() { // При закрытии таймера функция удаляет скрытое поле из всех форм
	$('.discount').remove();
}
function removeCounter() {
	$('.counter').css({
		"transition": "1s ease",
		"opacity": "0"
	});
	setTimeout(function () {
		$('.counter').remove();
	}, 1000);
}

timer.css

.counter {
    cursor: pointer;
    position: fixed;
    bottom: 12px;
    display: block;
    z-index: 9999;
    right: 12px;
    -webkit-box-shadow: -7px 13px 13px 0px rgba(50, 50, 50, 0.84);
    -moz-box-shadow: -7px 13px 13px 0px rgba(50, 50, 50, 0.84);
    box-shadow: -7px 13px 13px 0px rgba(50, 50, 50, 0.84);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    text-align: center;
}
.counter .wrapper {
    background: #ffc800;
    width: 350px;
    height: 140px;
    border: 2px solid;
    border-color: #f3bf00;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
.counter .wrapper h3{
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}
Посмотреть пример

Комментарии ()

    Оставить комментарий

    *Ваш email адрес не будет опубликован.

    Введите сумму 3 + 8 =