07.07.2015, 10:16
|
|
Новичок на форуме
|
|
Регистрация: 06.07.2015
Сообщений: 6
|
|
|
Нашёл таймер нужна помощь.
Всем доброго дня нашёл таймер всё работает как нужно. Но есть проблемка. Как сделать чтобы он запускался от кнопки. Останавливался когда время закончиться и снова нажимаешь опять пошёл отсчёт. И есть ли возможность сделать чтобы кнопка была в одном месте а таймер абсолютно в другом. Но если нет так нет. Вот таймер. Всем спасибо.
<span id="mT">00:00:10</span>
<script>
t = setInterval (function() {var s = document.getElementById ('mT'),
f = function (x) {return (x / 100).toFixed (2).substr (2)}, d = ':',
y = s.innerHTML.split (d), z = --y [2] + y [0] * 3.6e3 + y [1] * 60;
if (!z) clearInterval (t); s.innerHTML = [f (Math.floor (z / 3600)),
f (Math.floor (z % 3600 / 60)), f (z % 3600 % 60)].join (d)}, 1000);
</script>
|
|
07.07.2015, 10:38
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Это не проблемка, а проблемища. Надо достать безымянную функцию и сделать из нее объект с методами типа пошел-стоять и опциями на входе типа куда класть. Если подольше поныть, какой-нибудь профессор типа Рони напишет все за вас.
|
|
07.07.2015, 11:57
|
 |
Аспирант
|
|
Регистрация: 07.04.2015
Сообщений: 65
|
|
Вот что у меня получилось.
Исходя из прошлого задания. Думаю тебе не составит труда написать html и назначить вывод времени в нужное место.
Если какие вопросы, пиши.
var a = 3670; // Время в секундах.
var t = 1;
var check = 0;
var ch;
var mn;
var sc;
function startStopTimer(){
if (check == 0){
t = 1;
check = 1;
timer();
}
if (check == 1){
t = 0;
check = 0;
}
}
function timer(){
if (a==0){t=0;}
if(t==1){
a=a-1;
ch = Math.floor(a/60/60); //часы
mn = Math.floor(a/60-ch*60); //минуты
sc = a%60; //секунды
console.log(ch+":"+mn+":"+sc); //поменять console.log на document.element.value если это инпут или на innerHTML если к пимеру span
setTimeout('timer()',1000);
}
}
Функцию timer, дважды запускать не стоит. Как не ломал голову а защиту от дурака смог впихнуть только отдельно, а не в саму функцию. |
|
07.07.2015, 12:07
|
|
Новичок на форуме
|
|
Регистрация: 06.07.2015
Сообщений: 6
|
|
|
Таймер сделал всё работает. Остался один вопрос как сделать чтобы он не сбрасывался после перезагрузки страницы а продолжал работать?
|
|
07.07.2015, 12:27
|
|
Аспирант
|
|
Регистрация: 07.04.2015
Сообщений: 65
|
|
//страница.онлоард(
if (localStorage.getItem("ТвойсайтTimer")!=null){
a = localStorage.getItem("ТвойсайтTimer");
}
if (a==0){
a = 3670;//Время тоже что и в вар. Да и вар лучше переместить в эту часть кода. Да и вась скрипт лучше переместить под онлоард.
}
//)
....console.log(ch+":"+mn+":"+sc); //поменять console.log на document.element.value если это инпут или на innerHTML если к пимеру span
localStorage.setItem("ТвойсайтTimer", a);
setTimeout('timer()',1000);
}
}
Последний раз редактировалось Leon-on12, 07.07.2015 в 12:31.
Причина: Дополнил при обнулении.
|
|
07.07.2015, 15:20
|
|
Аспирант
|
|
Регистрация: 07.04.2015
Сообщений: 65
|
|
<!-- 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 миллисекунд, что бы кнопка точно не разблокировалась раньше времени. И соответственно функция не выполнилась раньше.
}
}
Костыль на костыле, но вроде я защитился от всех дураков. Предусмотрел и протестировал со всеми возможными вариациями.
С тебя точно плюсик. И мне будет очень обидно если ты не прочтёшь все комментарии которые я так кропотливо тебе выписывал.
Грамматику, прости уж, не проверял. Надеюсь помог.
|
|
07.07.2015, 16:24
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
А это, один раз можно взять все элементы по ид, или это нормально раз в секунду все их добывать и профтыкать?
|
|
07.07.2015, 17:17
|
|
Аспирант
|
|
Регистрация: 07.04.2015
Сообщений: 65
|
|
За 5 страниц твоих сообщений, 1 сообщение с анонимной функцией (а ты ругался на мой кусок кода, намекая что это мол что-то незаконченное)
И ещё одно сообщение с одной строчкой кода. за 125 сообщений 1 анонимная функция и один var. Да уж, это внушает твоим словам авторитет. Особенно хамить Рони, прям возносит тебя в разряд бога.
В любом случае, иметь карму 10 при 2 тысячах сообщений немного странно.
Не смотря на то что ты постоянно всем хамишь, а если не хамишь так язвишь, если бы твои посты помогали людям, то по моим прикидкам, у тебя была бы карма около 100-200, с учётом минусов за хамство.
Но ты, видимо, только выпендриваться горазд, хотя и знаешь что-то, что самое печальное в твоей истории.
Сообщение от kostyanet
|
|
А это, один раз можно взять все элементы по ид, или это нормально раз в секунду все их добывать и профтыкать?
|
А по поводу этого не совсем понял, ты мне предлагаешь назначить переменную? То есть:
var elem=document.getElementById("[eq")
Мне казалось, только казалось, я не разбирался в принципах работы js, что это лишь упрощение записи, ну либо упрощение для изменение кода, что бы не искать все места где вызывается этот элемент.
А в остальном, как мне казалось, что
function(){
document.getElementById("[eq").run
document.getElementById("[eq").stop
document.getElementById("[eq").sit
}
Что
function(){
elem.run
elem.stop
elem.sit
}
Будут одинаково вызывать элемент 3 раза. Может я чего-то не знаю. Но ты всё равно ответишь что-нибудь офигенно оригинальное и превозносящее тебя над всем нами, а не по существу. Хотя, кто знает...
|
|
07.07.2015, 17:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Leon-on12,
document.getElementById отправили браузер на поиск - ждём 1 наносекунду
три раза запустили 3 наносекунды
второй вариант закешировали
1 нано на поиск
плюс 3 * 0.1 на выдачу из кеша
итого 1.3 против 3
(время условно)
|
|
07.07.2015, 18:57
|
|
Аспирант
|
|
Регистрация: 07.04.2015
Сообщений: 65
|
|
|
рони,
Спасибо. Не знал. Думал нет разницы.
Тогда такой вопрос. Если у нас страница весит тонну и вызов элемента занимает секунду, вызов из кеша будет 0.1 секунда, или 0.1 нано?
Хотя, пока писал, понял что из кеша скорость доставания зависит только от величины элемента, наверное.
|
|
|
|
