Таймер отсчета 24 часов. [Архив форума]

ShoKKK

01.04.2013, 01:15

Ребята, нужна помощь. Нужен таймер обратного отсчета 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;heig ht: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;heig ht: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;heig ht: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

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

Спасибо.