Обратный отчет таймер
Всем привет. Подскажите в чем проблема, где ошибки. Код не хочет работать.
<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,
сделайте минимальный макет |
| Часовой пояс GMT +3, время: 04:59. |