Javascript.RU

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

Таймер отсчета 24 часов.
Ребята, нужна помощь. Нужен таймер обратного отсчета 24 часов, который по истечению времени стартует заново.
Выглядеть должен так "Осталось 23часов 12минут 20сек"
Нигде не могу найти. Может кто что подскажет
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2013, 02:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Не надёжно это дюже.)
Но если вы доверяете времени на машине клиента то так:
<body>
<script>
(function setCounter(callback) {
	function output( ms ){
		function num(n, one, two, five) {
			if ((n = Math.abs(n) % 100) > 4 && n < 21 || (n %= 10) > 4 || n === 0 ) return five;
			if (n > 1) return two;
			return one;
		}

		var h = Math.floor( ms / (60*60*1000)),
			m = Math.floor((ms -= h*60*60*1000) / (60*1000) ),
			s = Math.floor((ms -= m*60*1000) / 1000 );
		
		var string = 'Остал' + num(h,'ся','ось','ось'); 
		if(h) string += ' ' + h + ' час' + num(h,'','а','ов');
		if(m) string += ' ' + m + ' минут' + num(m, 'а','ы','');
		if(s) string += ' ' + s + ' секунд' + num(s, 'а', 'ы', '');
		string += '.';
		
		return  string
	}

	var endCounter = /(?:^|; )endCounter=([^;]*)/.exec(document.cookie);
	if(endCounter) {
		endCounter = new Date(+endCounter[1]);
	} else {
		endCounter = new Date();
		endCounter.setTime(endCounter.getTime() + 24*60*60*1000);
		document.cookie = "endCounter=" + +endCounter + ';path=/;expires=' + endCounter.toUTCString();
	}
	
	(function counter(){
		var left = endCounter - new Date();
		if(left<=0) return setCounter();
		
		callback( output( endCounter - new Date() ) );
		
		setTimeout(counter, 1000)
	}())
}( function( str ){document.body.innerHTML = str} ))
</script>
</body>

//слава богу вовремя остановился.))
__________________
29375, 35

Последний раз редактировалось Aetae, 01.04.2013 в 02:20.
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2013, 00:28
Новичок на форуме
Отправить личное сообщение для Pacmanov Посмотреть профиль Найти все сообщения от Pacmanov
 
Регистрация: 26.09.2013
Сообщений: 2

Здравствуйте.
Имеется сайт, на нем есть таймер.
Он показывает в таком режиме: 5:9:2, нужно чтобы показывал 05:09:02.
Скрипты разные, т.е. отдельно на часы, на минуты, на секунды:

Часы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 9 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
div#container
{
   width: 58px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: transparent;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_timer2" style="position:absolute;left:0px;top:0px;width:57px;height:25px;z-index:0;">
<div style="color:#1F1F1F;font-size:48px;font-family:Trebuchet MS;font-weight:bold;font-style:normal;text-decoration:none" id="countdown"></div>
<script type="text/javascript">
var strTargetDate = "12/25/3012 12:00 AM";
var strFormat = "$HOURS$";
var strExpired = "Акция закончена";

function doCountDown(seconds) 
{
   if (seconds < 0) 
   {
      document.getElementById("countdown").innerHTML = strExpired;
      return;
   }
   var strMsg = strFormat;
   strMsg = strMsg.replace("$DAYS$",    ((Math.floor(seconds/86400))%100000).toString());
   strMsg = strMsg.replace("$HOURS$",   ((Math.floor(seconds/3600))%24).toString());
   strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
   strMsg = strMsg.replace("$SECONDS$",  ((Math.floor(seconds))%60).toString()); 

   document.getElementById("countdown").innerHTML = strMsg;

   setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}
function initCountDown()
{
   var dtTarget = new Date(strTargetDate);
   var dtNow = new Date();
   var dtDiff = new Date(dtTarget-dtNow);
   var totalSeconds = Math.floor(dtDiff.valueOf()/1000);

   doCountDown(totalSeconds);
}
initCountDown();
</script>

</div>

</div>
</body>
</html>


Минуты:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 9 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
div#container
{
   width: 58px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: transparent;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_timer2" style="position:absolute;left:0px;top:0px;width:57px;height:25px;z-index:0;">
<div style="color:#1F1F1F;font-size:48px;font-family:Trebuchet MS;font-weight:bold;font-style:normal;text-decoration:none" id="countdown"></div>
<script type="text/javascript">
var strTargetDate = "12/25/3012 12:00 AM";
var strFormat = "$MINUTES$";
var strExpired = "Акция закончена";

function doCountDown(seconds) 
{
   if (seconds < 0) 
   {
      document.getElementById("countdown").innerHTML = strExpired;
      return;
   }
   var strMsg = strFormat;
   strMsg = strMsg.replace("$DAYS$",    ((Math.floor(seconds/86400))%100000).toString());
   strMsg = strMsg.replace("$HOURS$",   ((Math.floor(seconds/3600))%24).toString());
   strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
   strMsg = strMsg.replace("$SECONDS$",  ((Math.floor(seconds))%60).toString()); 

   document.getElementById("countdown").innerHTML = strMsg;

   setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}
function initCountDown()
{
   var dtTarget = new Date(strTargetDate);
   var dtNow = new Date();
   var dtDiff = new Date(dtTarget-dtNow);
   var totalSeconds = Math.floor(dtDiff.valueOf()/1000);

   doCountDown(totalSeconds);
}
initCountDown();
</script>

</div>

</div>
</body>
</html>


Секунды:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 9 - http://www.wysiwygwebbuilder.com">
<style type="text/css">
div#container
{
   width: 58px;
   position: relative;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
body
{
   text-align: center;
   margin: 0;
   background-color: transparent;
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_timer2" style="position:absolute;left:0px;top:0px;width:57px;height:25px;z-index:0;">
<div style="color:#1F1F1F;font-size:48px;font-family:Trebuchet MS;font-weight:bold;font-style:normal;text-decoration:none" id="countdown"></div>
<script type="text/javascript">
var strTargetDate = "12/25/3012 12:00 AM";
var strFormat = "$SECONDS$";
var strExpired = "Акция закончена";

function doCountDown(seconds) 
{
   if (seconds < 0) 
   {
      document.getElementById("countdown").innerHTML = strExpired;
      return;
   }
   var strMsg = strFormat;
   strMsg = strMsg.replace("$DAYS$",    ((Math.floor(seconds/86400))%100000).toString());
   strMsg = strMsg.replace("$HOURS$",   ((Math.floor(seconds/3600))%24).toString());
   strMsg = strMsg.replace("$MINUTES$", ((Math.floor(seconds/60))%60).toString());
   strMsg = strMsg.replace("$SECONDS$",  ((Math.floor(seconds))%60).toString()); 

   document.getElementById("countdown").innerHTML = strMsg;

   setTimeout("doCountDown(" + (seconds-1).toString() + ")", 1000);
}
function initCountDown()
{
   var dtTarget = new Date(strTargetDate);
   var dtNow = new Date();
   var dtDiff = new Date(dtTarget-dtNow);
   var totalSeconds = Math.floor(dtDiff.valueOf()/1000);

   doCountDown(totalSeconds);
}
initCountDown();
</script>

</div>

</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2013, 01:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,809

Pacmanov,
document.getElementById("countdown").innerHTML = strMsg.replace(/(^\d$)/,"0$1");
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2013, 23:12
Новичок на форуме
Отправить личное сообщение для Pacmanov Посмотреть профиль Найти все сообщения от Pacmanov
 
Регистрация: 26.09.2013
Сообщений: 2

Сообщение от рони Посмотреть сообщение
Pacmanov,
document.getElementById("countdown").innerHTML = strMsg.replace(/(^\d$)/,"0$1");
Спасибо.

Последний раз редактировалось Pacmanov, 26.09.2013 в 23:17.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Таймер обратного отсчета на Alert moorzilla Общие вопросы Javascript 2 27.05.2012 21:14
Таймер обратного отсчета с часовым поясом destby Общие вопросы Javascript 0 03.08.2011 17:48
Графический таймер обратного отсчета bobri4 Элементы интерфейса 4 24.08.2009 21:50
Таймер обратного отсчета Mihael-Vlz Общие вопросы Javascript 1 14.06.2009 18:21
таймер обратного отсчета Mignon Общие вопросы Javascript 1 07.06.2008 16:16