Нужно, чтобы при получении чисел, которые указывает пользователь, они переводили своё значение в таймер. Но проблема не в этом. Когда таймер доходит до нуля (секундный), то минута должна минусоваться, а секундный таймер обнуляться, и заново от 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;
}