<!-- L.G.G product -->
<html>
<head>
<meta charset="utf-8">
</head>
<input type="button" id="timButt" onclick="sta()" value="Старт/Стоп">
<input type="text" id="timeInput" value="">
<span id="timeSpan"></span>
</body>
</html>
var a = 3670; // Время в секундах.
var t = 1; //переменная циклящая таймер при 1 и останавливающая отсчёт при t==0
var check = 0; //Переменная говорящая функции sta работает ли сейчас таймер или нет(нельзя использовать t так как есть хитрость для корректной работы)
var checking = 0; //Переменная проверяющая была ли нажата кнопка за последнюю секунду. Если не была, скрипт выполняется, если нет, ничего не происходит. Сделано для того что бы при быстром быстром нажатии на кнопку не возникало двойного запускания таймера.
var ch; //Переменная показывающая часы
var mn; //Минуты
var sc; //секунды
var inter; //Переменные для для таймаутов, что бы их можно было обнулить.
var interv;
if (localStorage.getItem("SiteTimer")!=null){ //Если в локальном хранилище что-то есть
a = localStorage.getItem("SiteTimer"); //назначаем переменной "a" то что лежит в локальном хранилище
}
if (a<=5){ //(если "a" равна 0) Изменено, так как при перезагрузки страницы на 4,3,2,1 секунде, таймер не останавливается при перехожденнии через 0, и граничные баги не исключены.
a = 3670; //Назначаем начальное значение, Тоже время что и сверху
}
function sta(){ //Функция запуска и остановки таймера. Имя изменено в виду того что на startStopTimer ругалась консоль не находя такую функцию
if (checking == 0){ //Проверяем прошло ли время с прошлого нажатия
//Красивости
document.getElementById('timButt').style.color = "#ff0000"; //Делаем буквы на кнопке красными
interv = setTimeout('document.getElementById("timButt").style.color = "#000000"', 1000); //Меняем обратно через тоже время что и меняем checking, по идее надо было бы заснуть его в тот же таймер, но для наглядности я их разделил. Назначаем этот таймоут переменной, что бы мы могли отчистить этот таймоут
//Интервалы должны объявляться до выполнения функции timer(); иначе они не будут чиститься
checking = 1; //Запрещаем функции выполняться
inter = setTimeout('checking = 0', 1000); //Разрешаем функции выполняться через промежуток времени. Назначаем этот таймоут переменной, что бы мы могли отчистить этот таймоут
if (check == 0){ //В начале таймер не работает check = 0
t = 1; //Разрешаем таймеру циклиться
timer(); //Запускаем таймер
}
check += 1; //check = 0+1 = 1. При следующем нажатии первая часть не выполнится так как check = 1 и в этой строчке check = 1+1=2
if (check == 2){ // И выполниться выключение таймера
t = 0; //Запрещаем таймеру циклиться
check = 0; //Ставим нуль что бы при следующем нажатии сработала первая часть функции запустив таймер
}
//Добавка для изменением названия кнопки
if (check == 0) document.getElementById('timButt').value = "Старт"; //Если чек равен нулю, значит только что выполнилась часть кода отвечающая за остановку таймера То есть чек был равен 2 и ему назначили нуль
if (check == 1) document.getElementById('timButt').value = "Стоп"; //Если чек равен единице, значит только что выполнилась часть кода отвечающая за запуск таймера То есть чек был равен 0 и к нему прибавили 1
}
}
function timer(){ //Функция таймера
if(t==1){ //Если t==1
a=a-1; //уменьшить колличество секунд на одну
ch = Math.floor(a/60/60); //Преобразование секунд в часы - Делим секунды дважды на 60 затем округляем в меньшую сторону
mn = Math.floor(a/60-ch*60); //Преобразование секунд в минуты - Делим секунды на 60, вычитаем колличество часов переведённые в минуты, округляем в меньшую сторону
sc = a%60; //% - остаток от деления нацело
document.getElementById('timeInput').value = (ch+":"+mn+":"+sc); //Берём елемент с id timeInput и ставим значение часов минут и секунд через ":"
document.getElementById('timeSpan').innerHTML = (ch+":"+mn+":"+sc); //Берём елемент с id timeSpan, для всех остальных тегов, будь то див или п, надо использовать innerHTML
localStorage.setItem("SiteTimer", a); //Ставим в локальном хранилище ключу SiteTimer значение переменной "a"
setTimeout('timer()',1000); //Циклим таймер. Конечно же циклим его через секундну.
}
if (a==5){ //Если "a" равна нулю надо остановить таймер. Возникали некоторые баги на границе, если останавливать время на единице, в виду этого был введён запрет на остановку таймера за 5 секунд до конца.
document.getElementById('timButt').style.color = "#ff0000"; //Меняем цвет
clearTimeout(inter); //отчищаем таймауты, можешь удалить их, остановить таймер на 6 секундах а потом заново запустить, что бы понять зачем они.
clearTimeout(interv);
checking = 1; ////Запрещаем функции sta выполняться
setTimeout(function(){
document.getElementById("timButt").style.color = "#000000"; //Возвращаем цвет
checking=0; //Разрешаем функции sta выполняться
sta(); //Сразу же её выполняем. Вместо прописывания сюда всех переменных, легче запустить функцию остановки таймера
a = 3670; //Ставим "a" начальное значение
}, 5050); // Поставим маленький запас в 50 миллисекунд, что бы кнопка точно не разблокировалась раньше времени. И соответственно функция не выполнилась раньше.
}
}
Костыль на костыле, но вроде я защитился от всех дураков. Предусмотрел и протестировал со всеми возможными вариациями.
С тебя точно плюсик. И мне будет очень обидно если ты не прочтёшь все комментарии которые я так кропотливо тебе выписывал.
Грамматику, прости уж, не проверял. Надеюсь помог.