обратный отсчет на сутки

[javascrip]

например 23 дня 19:11:22 (часы, минуты, секунды)
только тут дату не нужно указывать, лучше просто обратный счетчик на сутки или на двое, а потом снова заново начинается...
или на 64 часа обратный отсчет и чтобы заново потом начинался

подскажите, если какое решение для этого?)

[Nexus]

https://www.google.ru/search?q=javascript+countdown+with+days
https://www.w3schools.com/howto/howto_js_countdown.asp

[javascrip]

видел я их, они все с до указанной даты, а мне скорее всего нужен просто обратный отчет времени, 24 часа хотя бы

[рони]

javascrip,
https://javascript.ru/forum/misc/40828-tajjmer-obratnogo-otscheta-na-6-dnejj-2.html#post274396

[Nexus]

javascrip,
https://www.w3schools.com/code/tryit.asp?filename=FV2BHPHBYMVM

[j0hnik]

<div class="time"></div>
<script>
var x = 24*60*60*1000; // тоесть сутки
down = document.querySelector('.time'),
now = new Date(),
end = new Date(2018, 8, 8);
while(end < now) end = end.valueOf() + x; // когда закончится добавятся еще X (сейчас сутки)

(function tick(){
down.innerHTML ='';
var now = new Date(),
ost = new Date(end - now),
s = Math.floor(ost/1000),
m = Math.floor(s/60),
h = Math.floor(m/60),
d = Math.floor(h/24);
s = s%60+'';
m = m%60+'';
h = h%24+'';
d = d+'';
d = d.length == 1 ? '0'+d:d;
h = h.length == 1 ? '0'+h:h;
m = m.length == 1 ? '0'+m:m;
s = s.length == 1 ? '0'+s:s;

down.innerHTML = d+' дней '+h+' часов '+m+' минут '+s+' секунд';
if(ost>0) setTimeout(tick, 1000);
})();
</script>

[j0hnik]

javascrip,
если не указывать конечную дату, то про обновлении счетчик будет опять сутки отсчитывать, а это полагаю не то что нужно.

[рони]

j0hnik,
:-?
<div class="time"></div>
<script>
var x = 24*60*60*1000; // тоесть сутки
down = document.querySelector('.time'),
end = +new Date();

(function tick(){
var ost = end - new Date();
if(ost < 0) {end += x; ost = x};
var s = Math.floor(ost/1000),
m = Math.floor(s/60),
h = Math.floor(m/60),
d = Math.floor(h/24);
s = s%60+'';
m = m%60+'';
h = h%24+'';
d = d+'';
d = d.length == 1 ? '0'+d:d;
h = h.length == 1 ? '0'+h:h;
m = m.length == 1 ? '0'+m:m;
s = s.length == 1 ? '0'+s:s;

down.innerHTML = d+' дней '+h+' часов '+m+' минут '+s+' секунд';
requestAnimationFrame(tick)

})();
</script>

[j0hnik]

рони,
такие счетчики из серии "до конца акции осталось", и при обновлении страницы нужно не заново считать, а продолжать отсчет.

[рони]

:)
<div class="time"></div>
<script>
var x = 24*60*60*1000; // тоесть сутки
down = document.querySelector('.time'),
end = x;

function tick(e){
var ost = end - e;
if(ost < 0) {end = ost = x};
var s = Math.floor(ost/1000),
m = Math.floor(s/60),
h = Math.floor(m/60),
d = Math.floor(h/24);
s = s%60+'';
m = m%60+'';
h = h%24+'';
d = d+'';
d = d.length == 1 ? '0'+d:d;
h = h.length == 1 ? '0'+h:h;
m = m.length == 1 ? '0'+m:m;
s = s.length == 1 ? '0'+s:s;

down.innerHTML = d+' дней '+h+' часов '+m+' минут '+s+' секунд';
requestAnimationFrame(tick)

};
requestAnimationFrame(tick)

</script>

[рони]

а продолжать отсчет.
пост №4

[рони]

до конца суток осталось
<div class="time"></div>
<script>
var x = 24*60*60*1000; // тоесть сутки
down = document.querySelector('.time'),
end = new Date;
end.setHours(0,0,0);
end -= new Date;
end += x;
function tick(e){
var ost = end - e;
if(ost < 0) {end = ost = x};
var s = Math.floor(ost/1000),
m = Math.floor(s/60),
h = Math.floor(m/60),
d = Math.floor(h/24);
s = s%60+'';
m = m%60+'';
h = h%24+'';
d = d+'';
d = d.length == 1 ? '0'+d:d;
h = h.length == 1 ? '0'+h:h;
m = m.length == 1 ? '0'+m:m;
s = s.length == 1 ? '0'+s:s;

down.innerHTML = d+' дней '+h+' часов '+m+' минут '+s+' секунд';
requestAnimationFrame(tick)

};
requestAnimationFrame(tick)

</script>

[j0hnik]

Более универсальный, добавил склонения, можно указать конечную дату, время и сколько добавлять.

<div class="time"></div>
<script>
function sclPad(n, arr){
return n+" "+arr[(n%100>4 && n%100<20)?2:[2, 0, 1, 1, 1, 2][(n%10<5)?n%10:5]];
}
var x = 24*60*60*1000,
down = document.querySelector('.time'),
now = new Date(),
end = new Date(2018, 8, 8);

(function tick(){
down.innerHTML ='';
var now = new Date(),
ost = end - now,
s = Math.floor(ost/1000),
m = Math.floor(s/60),
h = Math.floor(m/60),
d = Math.floor(h/24);
s = s%60+'';
m = m%60+'';
h = h%24+'';
d = d+'';
d = d.length == 1 ? '0'+d:d;
h = h.length == 1 ? '0'+h:h;
m = m.length == 1 ? '0'+m:m;
s = s.length == 1 ? '0'+s:s;

down.innerHTML =
sclPad(d, ['день', 'дня', 'дней'])+
' '+sclPad(h, ['час', 'часа', 'часов'])+
' '+sclPad(m, ['минута', 'минуты', 'минут'])+
' '+sclPad(s, ['секунда', 'секунды', 'секунд']);
if(ost>0) setTimeout(tick, 1000);
else {
while(end < now) end = end.valueOf() + x;
tick();
}
})();
</script>

[рони]

j0hnik,
ost = new Date(end - now), зачем new Date?

[j0hnik]

рони,
поправил, спасибо

[javascrip]

подошло боле менее пост 12, а можно также сделать отсчет только на месяц? а потом снова чтобы он запускался

[рони]

а можно также сделать отсчет только на месяц?
можно уточнить месяц это сколько и с какого времени?

[javascrip]

просто месяц, например 30 дней, по типу var x = 24*60*60*1000;
может можно так var x = 30*24*60*60*1000; ?

[рони]

javascrip,
нужна дата отсчёта, иначе всегда будет
d = 29;
смотрите ссылку из поста №4, это то что вам нужно

[javascrip]

поставил 11.9.2018 он пишет до конца 60 дней

[javascrip]

он заново будет запускаться через 60 дней?

[javascrip]

а как убрать дней мин сек и тд? нужно в таком формате 23 11:36:45

[рони]

он заново будет запускаться через 60 дней?
да
нужно в таком формате 23 11:36:45
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body><div id = 'show'></div>
<script type="text/javascript">
function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return d + " " + two(c) + " : " + two(b) + " : " + two(a)
};


function Time() {
var data = Date.parse('9/9/2018 ') // дата начала 1 шестидневки строго "месяц/день/год"
data = new Date(data);
data.setMinutes((-180 - data.getTimezoneOffset()), 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять число
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+60)//через сутки +1 , через 6 дней +6
}
var a = data.getTime() - (new Date).getTime();
document.getElementById("show").innerHTML = formatTime(a);
window.setTimeout(Time, 1E3)
};
Time()
</script>
</body>
</html>

[javascrip]

спасибо, а если в коде 60 везде на 30 заменить, то 30 дней отсчет будет?

[javascrip]

26 и 28 строку поменял на 90 и 30, вроде норм)

[рони]

если в коде 60 везде на 30 заменить
менять только в строке 28 период

[javascrip]

поставил 2 счетчика на страницу, последний не отображается... поменял у второго на shows - стали оба видны, но отсчет идет только у последнего, первый замер... можно как нибудь исправить?

[javascrip]

и время там одинаковые, только дни можно менять, можно еще время изменить?

[рони]

javascrip,
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>


<div data-init="9/9/2018" data-period="1" data-minutes="600" >до 10 часов утра осталось</div>
<div data-init="8/27/2018" data-period="7" >до конца недели осталось</div>
<script>
/* data-minutes="600" 10 часов утра */

function two(a) {
return (9 < a ? "" : "0") + a
}
function formatTime(a) {
a = Math.floor(a / 1E3);
var b = Math.floor(a / 60),
c = Math.floor(b / 60),
d = c / 24 | 0,
c = c % 24;
a %= 60;
b %= 60;
return d + " " + two(c) + " : " + two(b) + " : " + two(a)
};
function timeInit()
{
var divs=document.querySelectorAll('[data-init]');
[].forEach.call(divs, function(div) {
var init = div.dataset.init; // дата начала периода строго "месяц/день/год"
var period = +div.dataset.period;
var minutes = +div.dataset.minutes || 0;
var time = function() {
var data = Date.parse(init)
data = new Date(data);
data.setMinutes((-180 - data.getTimezoneOffset()) + minutes, 0, 0); //для коррекции запустить в зоне акции alert((new Date).getTimezoneOffset()) и поменять -180(москва)
for (; (new Date).getTime() > data; ) {
data.setDate(data.getDate()+period)
}
var a = data.getTime() - (new Date).getTime();
div.innerHTML = formatTime(a);
window.setTimeout(time, 1E3)
}
time()
});
}
document.addEventListener('DOMContentLoaded', timeInit)


</script>
</body>
</html>

[javascrip]

спасибо, то что нужно)