Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2013, 00:51
Новичок на форуме
Отправить личное сообщение для levshaszr Посмотреть профиль Найти все сообщения от levshaszr
 
Регистрация: 08.11.2013
Сообщений: 9

Зацикленный таймер обратного отсчета
Здравствуйте. Помогите чайнику...установил на сайт таймер обратного отсчета, но он умеет только отсчитать до указанной даты и останавливается, а надо что бы отсчитал 7 дней и начал считать по новому кругу...
Если поставить дату не указывая месяц либо число, таймер обновляется при каждом обновлении страницы...
$(function(){
	
	var note = $('#note'),
		ts = new Date(2013,0, 8),
		newYear = true;
	
	if((new Date()) > ts){
		// The new year is here! Count towards something else.
		// Notice the *1000 at the end - time must be in milliseconds
		ts = (new Date()).getTime() + 10*24*60*60*1000;
		newYear = false;
	}
		
	$('#countdown').countdown({
		timestamp	: ts,
		callback	: function(days, hours, minutes, seconds){
			
			var message = "";
			
			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
			
			if(newYear){
				message += "left until the new year!";
			}
			else {
				message += "left to 10 days from now!";
			}
			
			note.html(message);
		}
	});
	
});

Заранее спасибо!!!
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2013, 01:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от levshaszr
надо что бы отсчитал 7 дней и начал считать по новому кругу...
Таймер обратного отсчета на 6 дней

найди циферку 6 в коде и поменяй на 7



... чего они там все считают переодически ... ?
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2013, 04:10
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Строки 4-12 заменить на:
function getTimestamp() {
	var lastDay = 0; // последний день 7-ми дневки: 0(Вс)1(Пн)2(Вт)3(Ср)4(Чт)5(Пт)6(Сб)
	var date = new Date();
	var period = (lastDay + 7 - date.getDay()) % 7;
	date.setDate(date.getDate() + period);
	date.setHours(24, 0, 0, 0);
	return date;
}
var ts = getTimestamp();

Строки 25-28, 30 удалить
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2013, 10:09
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от рони
... чего они там все считают переодически ... ?
Это распространенная задача при верстке лэндингов. Типа, акция заканчивается через 2 дня, спешите!
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2014, 11:37
Новичок на форуме
Отправить личное сообщение для vladimirkulik Посмотреть профиль Найти все сообщения от vladimirkulik
 
Регистрация: 16.02.2014
Сообщений: 1

Зациклить таймер.
Добрый день. Использую вот этот таймер:
<style>

#bigtimerblacklabels { width: 460px; margin: 0 auto; }
#clock-ticker { display: block; margin-bottom: 15px;}
#clock-ticker .block { position: relative; color: #fff; font-weight: bold; float: left; margin-right: 22px; }
#clock-ticker .block .flip-top { width: 88px; height: 39px; line-height: 75px; font-size: 55px; background: url('img/flip-top.png') no-repeat; text-align: center; }
#clock-ticker .block .flip-btm { width: 88px; height: 40px; background: url('img/flip-btm.png') no-repeat; text-align: center; }
#clock-ticker .block .label { color: #000; font-weight: bold; font-size: 14px; text-transform: uppercase; width: 88px; line-height: 35px; text-align: center; font-family: "Calibri", Arial, sans-serif;}
</style>

<div id="bigtimerblacklabels">
<div id="clock-ticker" class="clearfix">
<div class="block">
<span class="flip-top" id="numdays">8</span>
<span class="flip-btm"></span>
<footer class="label">Дней</footer>
</div>

<div class="block">
<span class="flip-top" id="numhours">14</span>
<span class="flip-btm"></span>
<footer class="label">Часов</footer>
</div>

<div class="block">
<span class="flip-top" id="nummins">34</span>
<span class="flip-btm"></span>
<footer class="label">Мин</footer>
</div>

<div class="block">
<span class="flip-top" id="numsecs">9</span>
<span class="flip-btm"></span>
<footer class="label">Сек</footer>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
var theDaysBox = $("#numdays");
var theHoursBox = $("#numhours");
var theMinsBox = $("#nummins");
var theSecsBox = $("#numsecs");

var refreshId = setInterval(function() {
var currentSeconds = theSecsBox.text();
var currentMins = theMinsBox.text();
var currentHours = theHoursBox.text();
var currentDays = theDaysBox.text();

if(currentSeconds == 0 && currentMins == 0 && currentHours == 0 && currentDays == 0) {
// if everything rusn out our timer is done!!
// do some exciting code in here when your countdown timer finishes

} else if(currentSeconds == 0 && currentMins == 0 && currentHours == 0) {
// if the seconds and minutes and hours run out we subtract 1 day
theDaysBox.html(currentDays-1);
theHoursBox.html("23");
theMinsBox.html("59");
theSecsBox.html("59");
} else if(currentSeconds == 0 && currentMins == 0) {
// if the seconds and minutes run out we need to subtract 1 hour
theHoursBox.html(currentHours-1);
theMinsBox.html("59");
theSecsBox.html("59");
} else if(currentSeconds == 0) {
// if the seconds run out we need to subtract 1 minute
theMinsBox.html(currentMins-1);
theSecsBox.html("59");
} else {
theSecsBox.html(currentSeconds-1);
}
}, 1000);
});
</script>

В ручную выставляю в нем дни часы минуты. Подскажите пожалуйста как его зациклить. Мне нужно выставить 24 часа и, чтобы когда они пройдут таймер снова сбросился на ноль и начал по новой отсчет. Реально ли это сделать? Заранее спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 06.10.2014, 17:28
Аватар для giv13
Интересующийся
Отправить личное сообщение для giv13 Посмотреть профиль Найти все сообщения от giv13
 
Регистрация: 06.10.2014
Сообщений: 11

Могу посоветовать вот этот таймер для сайта. У него есть такая функция - перезапуск таймера каждую неделю. Сам ей всегда пользуюсь для лэндингов.

Последний раз редактировалось giv13, 09.10.2014 в 20:33.
Ответить с цитированием
  #7 (permalink)  
Старый 06.10.2014, 21:45
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

giv13,
Цитата:
/*
* @name jQuery eTimer
* @version 1.0
* @author Ilia Grigorev
* @email giv13@bk.ru
* @license MIT License
*/
Почему бы не представить свой плагин в разделе "Ваши сайты и скрипты"?
Ответить с цитированием
  #8 (permalink)  
Старый 12.10.2014, 23:20
Аватар для giv13
Интересующийся
Отправить личное сообщение для giv13 Посмотреть профиль Найти все сообщения от giv13
 
Регистрация: 06.10.2014
Сообщений: 11

BETEPAH, Что мне это даст? Скажите, пожалуйста, я новичок на форуме. Просто как бы выставляешь на критику?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер обратного отсчета на 6 дней akella1900 Общие вопросы Javascript 25 17.06.2016 13:04
Допилить Таймер обратного отсчета Яков Соломоныч Элементы интерфейса 11 19.06.2013 17:37
Таймер обратного отсчета на Alert moorzilla Общие вопросы Javascript 2 27.05.2012 22:14
Графический таймер обратного отсчета bobri4 Элементы интерфейса 4 24.08.2009 22:50
таймер обратного отсчета Mignon Общие вопросы Javascript 1 07.06.2008 17:16