Задание таймера обратного отсчета

372
31 августа 2017, 22:09

Нужно, чтобы при получении чисел, которые указывает пользователь, они переводили своё значение в таймер. Но проблема не в этом. Когда таймер доходит до нуля (секундный), то минута должна минусоваться, а секундный таймер обнуляться, и заново от 59, и так до конца. Но почему-то когда он доходит до нуля, он не обнуляется (идет по отрицательным значениям), а минута не делает -1.

    //for_break_functions
function toBreak(){
var to_break = document.getElementsByClassName("digit");
if(to_break[0].innerHTML !== 0) 
to_break[0].innerHTML--; 
}
function toBreakPlus(){
var to_break = document.getElementsByClassName("digit");
to_break[0].innerHTML++;
}

$(".minus").click(function() { 
 toBreak();
});
$(".plus").click(function() {
  toBreakPlus();
});
//for_break_functions_end
//for_session_functions
function toBreak2(){
var to_break = document.getElementsByClassName("digit2");
if(to_break[0].innerHTML !== 0) 
to_break[0].innerHTML--; 
}
function toBreakPlus2(){
var to_break = document.getElementsByClassName("digit2");
to_break[0].innerHTML++;
}

$(".minus2").click(function() { 
 toBreak2();
});
$(".plus2").click(function() {
  toBreakPlus2();
});

  function foo() {
  var obj_time1 = document.getElementById("seconds"),      
      obj_digit = document.getElementsByClassName("digit2"),
      obj_time2 = document.getElementById("minutes");
    obj_time1.innerHTML = 59;
    obj_time2.innerHTML = obj_digit[0].innerHTML - 1;
      var timerId = setInterval(function() {
      obj_time1.innerHTML--;
}, 1000);
    if(obj_time1.innerHTML == 0) {
      obj_time2.innerHTML--;
      clearInterval(timerId);
      obj_time1.innerHTML = 59;
      timerId = setInterval(function() {
      obj_time1.innerHTML--;
}, 1000);
    }
  //   if(obj_time1.innerHTML === 0){
  //   obj_time2.innerHTML--;
  //   obj_time1.innerHTML = 59;
  // }
  }
foo();

//html

<body>
  <center>
    <p>
      <h2>BREAK LENGTH</h2>
      <button class = "minus">-</button>
      <span class = "digit" style = "padding-left: 20px; padding-right: 20px; font-size: 66px;">5</span>
      <button class = "plus">+</button>
    </p>
    <img src = "https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/4b11ad8f-3e48-4112-83df-336065c49829/icon/d31ca7be-0497-4370-801f-97a29dc3b584" class = "pomodor">
  <div class = "time"><span id="minutes"></span><span>:</span><span id = "seconds"></span></div>
  <div style = "margin-top: 400px; margin-left: 34px;">
  <h2>SESSION LENGTH</h2>
    <div style = "margin-left: -15px">
          <button class = "minus2">-</button>
      <span class = "digit2" style = "padding-left: 20px; padding-right: 20px; font-size: 66px;">25</span>
      <button class = "plus2">+</button>
    </div>
  </div>
  </center>
    </body>

//css

body {
  background-color: #696969;
}
.pomodor{
  position: absolute;
  margin-left: -190px;
  margin-top: -20px;
}
.time{
  position: absolute;
  margin-top: 210px;
  z-index: 1;
  font-size: 40px;
  margin-left: 800px;
}
Answer 1
  1. Ваше условие if (obj_time1.innerHTML == 0) нужно поместить внутрь setInterval(), иначе получается, что оно срабатывает только единожды, при самом запуске foo().
  2. И само условие if (obj_time1.innerHTML == 0) неверное - вы 1 секунду теряете таким образом. Нужно так - if (obj_time1.innerHTML < 0).
  3. Весь код пересчета секунд и минут нужно вынести в отдельную функцию, например, start() и зациклить ее в setInterval() - тогда все будет считаться как надо.

Рабочий пример (кол-во секунд в минуте установил на 3, чтобы не ждать целую минуту для проверки):

//for_break_functions 
function toBreak() { 
  var to_break = document.getElementsByClassName("digit"); 
  if (to_break[0].innerHTML !== 0) 
    to_break[0].innerHTML--; 
} 
 
function toBreakPlus() { 
  var to_break = document.getElementsByClassName("digit"); 
  to_break[0].innerHTML++; 
} 
 
 
$(".minus").click(function() { 
  toBreak(); 
}); 
$(".plus").click(function() { 
  toBreakPlus(); 
}); 
//for_break_functions_end 
 
//for_session_functions 
function toBreak2() { 
  var to_break = document.getElementsByClassName("digit2"); 
  if (to_break[0].innerHTML !== 0) 
    to_break[0].innerHTML--; 
} 
 
function toBreakPlus2() { 
  var to_break = document.getElementsByClassName("digit2"); 
  to_break[0].innerHTML++; 
} 
 
 
$(".minus2").click(function() { 
  toBreak2(); 
}); 
$(".plus2").click(function() { 
  toBreakPlus2(); 
}); 
 
 
 
function foo() { 
  var obj_time1 = document.getElementById("seconds"), 
    obj_digit = document.getElementsByClassName("digit2"), 
    obj_time2 = document.getElementById("minutes"), 
    timerId; 
  obj_time1.innerHTML = 3; 
  obj_time2.innerHTML = obj_digit[0].innerHTML; 
  timerId = setInterval(function() { 
    start(); 
  }, 1000); 
 
  function start() { 
    obj_time1.innerHTML--; 
 
    if (obj_time1.innerHTML < 0) { 
      obj_time2.innerHTML--; 
      clearInterval(timerId); 
      obj_time1.innerHTML = 3; 
      timerId = setInterval(function() { 
        start(); 
      }, 1000); 
 
    } 
  } 
 
  //   if(obj_time1.innerHTML === 0){ 
  //   obj_time2.innerHTML--; 
  //   obj_time1.innerHTML = 59; 
  // } 
} 
foo();
body { 
  background-color: #696969; 
} 
 
.pomodor { 
  position: absolute; 
  margin-left: -190px; 
  margin-top: -20px; 
} 
 
.time { 
  position: absolute; 
  margin-top: 210px; 
  z-index: 1; 
  font-size: 40px; 
  margin-left: 800px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<center> 
  <p> 
    <h2>BREAK LENGTH</h2> 
    <button class="minus">-</button> 
    <span class="digit" style="padding-left: 20px; padding-right: 20px; font-size: 66px;">5</span> 
    <button class="plus">+</button> 
  </p> 
  <img src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/4b11ad8f-3e48-4112-83df-336065c49829/icon/d31ca7be-0497-4370-801f-97a29dc3b584" class="pomodor"> 
  <div class="time"><span id="minutes"></span><span>:</span><span id="seconds"></span></div> 
  <div style="margin-top: 400px; margin-left: 34px;"> 
    <h2>SESSION LENGTH</h2> 
    <div style="margin-left: -15px"> 
      <button class="minus2">-</button> 
      <span class="digit2" style="padding-left: 20px; padding-right: 20px; font-size: 66px;">25</span> 
      <button class="plus2">+</button> 
    </div> 
  </div> 
</center>

И еще рекуомендую вам дописать код так, чтобы он тормозил таймер, когда obj_time1 и obj_time2 равны 0.

Answer 2

Пробуем вот такую реализацию таймера: Важно, конечно, останавливать таймер, если оба значения "Минут" и "Секунд" меньше нуля и делать проверку. Так же делать проверку, чтобы значения не были выше 60 (по понятным причинам).

let clocks = () => { 
	let minutes = document.getElementById("minutes"); 
	let seconds = document.getElementById("seconds");     
	let minutes_data = 0; 
	let seconds_data = 5; 
	 
	let timer = setInterval(function() { 
		minutes.innerHTML = minutes_data; 
		seconds.innerHTML = seconds_data-- ; 
		if(seconds_data < 10) {  
			seconds.innerHTML = '<span>0</span>' + seconds_data; 
		} 
		if(minutes_data < 10) { 
			minutes.innerHTML = '<span>0</span>' + minutes_data; 
		} 
		if(seconds_data == 0) { 
			seconds_data = 59; 
			minutes_data--; 
			if(minutes_data < 0) clearInterval(timer) 
		} 
	}, 1000);   
	 
 } 
 clocks(); 
html, body { 
	height: 100%; 
} 
body { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	flex-direction: column; 
	 
	font-family: sans-serif; 
	padding: 15%; 
} 
.timer { 
	font-size: 5rem; 
}
<div class="timer"> 
	<span id="minutes"></span> : <span id="seconds"></span> 
</div>

READ ALSO
get запрос работает некорректно
javascript

get запрос работает некорректно

ЗдравствуйтеПо каким причинам не отправляется get запрос ?

 426
многократное отправлени xhr запроса
javascript

многократное отправлени xhr запроса

Могу ли я отправлять xhr запрос в виде следующего кода:

 338
JSON.Parse + Ajax
javascript

JSON.Parse + Ajax

Делаю Ajax запрос который возвращает мне такие строки

 317
Пытаюсь сделать слайдер на js
javascript

Пытаюсь сделать слайдер на js

ЗдравствуйтеПытаюсь сделать слайдер на чистом js, суть такова

 328