Обратный отчет таймер
Всем привет. Подскажите в чем проблема, где ошибки. Код не хочет работать.
<div class="container">
<h2>Home Work 2</h2>
<div class="box hide"></div>
<div id="showtime">00:00</div>
<button id="start" class="btn btn-primary">START</button>
<br>
<br>
<form name="form">
<div>
Day: <input id='day_id'>
</div>
<div>
hours: <input id='hour_id'>
</div>
<div>
minutes: <input id='minute_id'>
</div>
</form>
</div>
function timer(){
let day= getElementById('day_id').value;
let hour=getElementById('hour_id').value;
let minute=getElementById('minute_id').value;
let second=59;
const now = new Date()
, newTime = new Date(now.getFullYear()+ 1, 0, 1)
, diff = newTime.getTime() - now.getTime()
, days = day
, hours = hour
, minutes = minute
, seconds = 59 - now.getSeconds()
;
let st = '';
if(diff <= 0) {
st = window.open("http://google.com");
} else {
st=`${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
}
document.getElementById('start').addEventListener('click', timer);
document.getElementById("showtime").innerHTML = st;
setTimeout(timer, 1000);
}
timer();
|
метод getElementById вызывайте у document
document.getElementById() если вызывать его как вы, интерпретатор будет пытаться его найти в window, а там такого метода нет |
Цитата:
|
FotGOD,
так вы сразу функцию вызываете, вот он и тикает сразу
<div class="container">
<h2>Home Work 2</h2>
<div class="box hide"></div>
<div id="showtime">00:00</div>
<button id="start" class="btn btn-primary">START</button>
<br>
<br>
<form name="form">
<div>
Day: <input id='day_id'>
</div>
<div>
hours: <input id='hour_id'>
</div>
<div>
minutes: <input id='minute_id'>
</div>
</form>
</div>
<script>
function timer(){
let day= document.getElementById('day_id').value;
let hour = document.getElementById('hour_id').value;
let minute = document.getElementById('minute_id').value;
let second = 59;
const now = new Date()
, newTime = new Date(now.getFullYear()+ 1, 0, 1)
, diff = newTime.getTime() - now.getTime()
, days = day
, hours = hour
, minutes = minute
, seconds = 59 - now.getSeconds()
;
let st = '';
if(diff <= 0) {
st = window.open("http://google.com");
} else {
st=`${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
}
document.getElementById('start').addEventListener('click', timer);
document.getElementById("showtime").innerHTML = st;
setTimeout(timer, 1000);
}
timer();
</script>
|
Цитата:
document.getElementById('start').addEventListener('click', timer);
это из функции и заработала кнопка. А почему не уменьшаются минуты, когда секунда доходит до нуля? |
<input type="number" id="day">Дней<br>
<input type="number" id="hour">Часов<br>
<input type="number" id="min">Минут<br>
<button id="st">start</button>
<div id="time"></div>
<script>
var end;
function timer(){
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+'';
if(ost>0){
setTimeout(timer, 1000);
time.textContent = `${d}-дней ${h}-часов ${m}-минут ${s}-секунд`;
}
else window.open("http://google.com");
}
st.onclick = e =>{
end = Date.now() + ( day.value*86400000 ) + ( hour.value*3600000) + ( min.value* 60000);
timer();
};
</script>
|
Цитата:
If(seconds==0){minutes--; } и так для всех переменных, но не сработало. Не подскажите почему? |
Цитата:
|
Цитата:
|
FotGOD,
сделайте минимальный макет |
Цитата:
function timer() {
let day = document.getElementById('day_id').value;
let hour = document.getElementById('hour_id').value;
let minute = document.getElementById('minute_id').value;
let second = 59;
const now = new Date(),
newTime = new Date(now.getFullYear() + 1, 0, 1),
diff = newTime.getTime() - now.getTime(),
days = day,
hours = hour,
minutes = minute,
seconds = 59 - now.getSeconds();
let st = '';
if(seconds==0){
minutes--;
}
if(minutes==0&&seconds==0)
{
hours--;
}
if (diff <= 0) {
st = window.open("http://google.com");
} else {
st = `${days} days, ${hours} hours,${minutes}minutes,${seconds}seconds`;
}
document.getElementById("showtime").innerHTML = st;
}
document.getElementById('start').addEventListener('click', () => setInterval(timer, 1000));
timer();
|
FotGOD,
minutes объявлены константой, константы меняться не должны. замените на var |
Цитата:
получается к minutes заново присваивается minute. Если сделать так
hours = 23 - now.getHours()
, minutes = 59 - now.getMinutes()
, seconds = 59 - now.getSeconds()
то идет нормально отчет, но с 59 минуте, а если присваивать через инпат
hours = hour-now.getHours(),
minutes = minute-now.getMinutes(),
seconds = 59 - now.getSeconds()
то сразу минуты и часы идут в минус, но не возвращается та цифра, которую присвоил через minute. Чтото не так делаю |
Попробовал сделать так, но тогда без кнопки старт все идет, и не вписываются минуты:
где
document.getElementById('start').addEventListener('click', () => setInterval(timer, 1000))
, вообще ничего не решает, его даже не замечает интерпретатор
function timer(){
let day = document.getElementById('day_id').value;
let hour = document.getElementById('hour_id').value;
let minute = document.getElementById('minute_id').value;
let second = 59;
let st='';
var IdInt=setInterval(function(){
if(hour<=0&&minute<=0&&second<=0){
var openurl=window.open("http://google.com");
}
document.getElementById("showtime").innerHTML = st;
if(second>=0){
st = `${day} days, ${hour} hours,${minute}minutes,${second}seconds`;
}
second=second-1;
if(second==0){
minute--;
second=59;
}
}, document.getElementById('start').addEventListener('click', () => setInterval(timer, 1000))
);
. Это уже просто мысли в слух, на " а вдруг". Но пока не в верном направлении иду... |
| Часовой пояс GMT +3, время: 09:43. |