Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Таймер отсчета 24 часов. (https://javascript.ru/forum/misc/36915-tajjmer-otscheta-24-chasov.html)

ShoKKK 01.04.2013 01:15

Таймер отсчета 24 часов.
 
Ребята, нужна помощь. Нужен таймер обратного отсчета 24 часов, который по истечению времени стартует заново.
Выглядеть должен так "Осталось 23часов 12минут 20сек"
Нигде не могу найти. Может кто что подскажет:help:

Aetae 01.04.2013 03:18

Не надёжно это дюже.)
Но если вы доверяете времени на машине клиента то так:
<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>

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

Pacmanov 26.09.2013 01:28

Здравствуйте.
Имеется сайт, на нем есть таймер.
Он показывает в таком режиме: 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>

рони 26.09.2013 02:36

Pacmanov,
document.getElementById("countdown").innerHTML = strMsg.replace(/(^\d$)/,"0$1");

Pacmanov 27.09.2013 00:12

Цитата:

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

Спасибо.


Часовой пояс GMT +3, время: 07:38.