обратный отсчет на сутки
например 23 дня 19:11:22 (часы, минуты, секунды)
только тут дату не нужно указывать, лучше просто обратный счетчик на сутки или на двое, а потом снова заново начинается... или на 64 часа обратный отсчет и чтобы заново потом начинался подскажите, если какое решение для этого?) |
|
видел я их, они все с до указанной даты, а мне скорее всего нужен просто обратный отчет времени, 24 часа хотя бы
|
|
|
<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>
|
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>
|
рони,
такие счетчики из серии "до конца акции осталось", и при обновлении страницы нужно не заново считать, а продолжать отсчет. |
:)
<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>
|
Цитата:
|
до конца суток осталось
<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>
|
Более универсальный, добавил склонения, можно указать конечную дату, время и сколько добавлять.
<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? |
рони,
поправил, спасибо |
подошло боле менее пост 12, а можно также сделать отсчет только на месяц? а потом снова чтобы он запускался
|
Цитата:
|
просто месяц, например 30 дней, по типу var x = 24*60*60*1000;
может можно так var x = 30*24*60*60*1000; ? |
javascrip,
нужна дата отсчёта, иначе всегда будет d = 29; смотрите ссылку из поста №4, это то что вам нужно |
поставил 11.9.2018 он пишет до конца 60 дней
|
он заново будет запускаться через 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>
|
спасибо, а если в коде 60 везде на 30 заменить, то 30 дней отсчет будет?
|
26 и 28 строку поменял на 90 и 30, вроде норм)
|
Цитата:
|
поставил 2 счетчика на страницу, последний не отображается... поменял у второго на shows - стали оба видны, но отсчет идет только у последнего, первый замер... можно как нибудь исправить?
|
и время там одинаковые, только дни можно менять, можно еще время изменить?
|
таймеры из data-атрибутов
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>
|
спасибо, то что нужно)
|
| Часовой пояс GMT +3, время: 06:07. |