Таймер отсчета 24 часов.
Ребята, нужна помощь. Нужен таймер обратного отсчета 24 часов, который по истечению времени стартует заново.
Выглядеть должен так "Осталось 23часов 12минут 20сек" Нигде не могу найти. Может кто что подскажет:help: |
Не надёжно это дюже.)
Но если вы доверяете времени на машине клиента то так: <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>
//слава богу вовремя остановился.)) |
Здравствуйте.
Имеется сайт, на нем есть таймер. Он показывает в таком режиме: 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>
|
Pacmanov,
document.getElementById("countdown").innerHTML = strMsg.replace(/(^\d$)/,"0$1");
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:53. |