Форум

ShoKKK · #1 (**permalink**) 01.04.2013, 01:15

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

Aetae · #2 (**permalink**) 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 · #3 (**permalink**) 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>

рони · #4 (**permalink**) 26.09.2013, 02:36

Pacmanov,

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

Pacmanov · #5 (**permalink**) 27.09.2013, 00:12

Сообщение от рони

Pacmanov,

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

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript