Таймер с условием

@maruo · Регистрация: 26.04.2013

Студворк — интернет-сервис помощи студентам

Нужен таймер с условием.

Время 10 секунд.

На странице выводится вопрос, ответить нужно за 10 секунд иначе

JavaScript
1
location.href='result_game_inc.php?timer=0';

Как только мы ответили на вопрос и он оказался верным. Выводится след вопрос и нужно обновить время снова на 10 секунд.

Если обновить просто страницу, то таймер должен продолжать тикать, уйдем со страницы и через строку поиска опять перейдем туда он все равно должен тикать.

Так же функцию добавить в него. По нажатию кнопки добавить время , добавляется время.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    
<div>Осталось <span id="timer"></span> секунд</div>
        
 
 
 
<script type="text/javascript"><!--
var t=10;
function refr_time()
{
  if (t>0)
  {
    t--;
    document.getElementById('timer').innerHTML=t;
  } else
  {
    
    clearInterval(tm);
    location.href='result_game_inc.php?timer=0';
  }
}
var tm=setInterval('refr_time();',1000);
 
--></script>

Есть начало, код нарыл в сети.
Головы не хватает уже на JS и так php slq ajax загрузили не плохо
Надеюсь мир ни без добрых людей помогите чем можете!

@jade · 04.02.2016, 01:25

Накидал на скорую руку скриптик

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    !function(){
        var ONE_SECOND = 1000,
              TIME_FOR_ANSWER = 10,
              tm, restTimeToAnswer;
        
        if (localStorage.restTime && localStorage.restTime <= 0) localStorage.restTime = TIME_FOR_ANSWER;
        restTimeToAnswer = localStorage.restTime || TIME_FOR_ANSWER;
        timer.innerHTML = restTimeToAnswer;
 
        function countTime() {
            if (restTimeToAnswer) {
                tm = setTimeout(function() {
                    restTimeToAnswer--;
                    timer.innerHTML = restTimeToAnswer;
                    localStorage.restTime = restTimeToAnswer;
                    countTime();
                }, ONE_SECOND);
            } else {
                location.href = 'http://brazzers.com';
            }
        }
 
        rightAnswer.onclick = function() {
            clearInterval(tm);
            restTimeToAnswer = localStorage.restTime = TIME_FOR_ANSWER;
            timer.innerHTML = restTimeToAnswer;
            countTime();
        }
 
        countTime();
    }.call(this);

HTML5
1
2
    <div>Осталось <span id="timer"></span> секунд</div>
    <button id="rightAnswer">Верный ответ на вопрос</button>

Только вот старые IE могут не понимать localStorage, не помню с какой версии у них поддержка. Других вариантов, как сохранять значения счетчика при перезагрузке страницы, к сожалению, не придумал. В сценарии, если пользователь закроет страницу и заново зайдет на нее, мой таймер во время его отсутствия тикать не будет. Тут нужно, как мне видится, либо серверную логику подключать, либо с объектом Date поиграться.

@maruo · 04.02.2016, 20:30 **[ТС]**

jade, Он вообще не реагирует, не запускается

@jade · 04.02.2016, 21:26

Странно, я проверил в трех браузерах, во всех работает. А ты из какого браузера cкрипт запускаешь?
И еще ты скрипт где подключаешь? Перед закрывающим тэгом body или в heade? Нужно первое, либо весь скрипт обернуть в document.addEventListener('DOMContentLoa ded', handler);

@maruo · 04.02.2016, 21:27 **[ТС]**

Сообщение от jade

document.addEventListener('DOMContentLoa ded', handler);

Не понял?, в теги стрипта то я обернул их а это что? впервые вижу
Да дело не в браузере Яндекс браузер для справки

@jade · 04.02.2016, 21:40

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    "use strict";
 
document.addEventListener('DOMContentLoaded', function(){
    var ONE_SECOND = 1000,
          TIME_FOR_ANSWER = 10,
          tm, restTimeToAnswer;
    
    if (localStorage.restTime && localStorage.restTime <= 0) localStorage.restTime = TIME_FOR_ANSWER;
    restTimeToAnswer = localStorage.restTime || TIME_FOR_ANSWER;
    timer.innerHTML = restTimeToAnswer;
 
    function countTime() {
        if (restTimeToAnswer) {
            tm = setTimeout(function() {
                restTimeToAnswer--;
                timer.innerHTML = restTimeToAnswer;
                localStorage.restTime = restTimeToAnswer;
                countTime();
            }, ONE_SECOND);
        } else {
            location.href = 'http://brazzers.com';
        }
    }
 
    rightAnswer.onclick = function() {
        clearInterval(tm);
        restTimeToAnswer = localStorage.restTime = TIME_FOR_ANSWER;
        timer.innerHTML = restTimeToAnswer;
        countTime();
    }
 
    countTime();
});

Установил даже специально яндекс браузер, там тоже работает. Ты похоже что-то не так делаешь, или не так подключаешь. Попробуй с оберткой этой тогда вставь скрипт.

@maruo · 04.02.2016, 22:03 **[ТС]**

jade, сейчас заработал, но когда я обновляют страницу, скрипт ПРИОСТАНАВливается.Тоесть пауза.
Было бы не плохо если бы вы закомментировали код, я бы так смог его поправить как мне нужно .
И доделать со временем

Добавлено через 19 минут
Приостанавливается когда постоянно жмешь f5 ,а то мб я запутаю вас)

@jade · 04.02.2016, 22:09

Лови.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    "use strict";
 
document.addEventListener('DOMContentLoaded', function(){ //когда документ отрендерится
    var ONE_SECOND = 1000, //объявляем константы
          TIME_FOR_ANSWER = 10, //
          tm, restTimeToAnswer; // и просто переменные
    
    if (localStorage.restTime && localStorage.restTime <= 0) localStorage.restTime = TIME_FOR_ANSWER; //проверка, что в localstorage есть свойство restTime и его значение не меньше нули
    restTimeToAnswer = localStorage.restTime || TIME_FOR_ANSWER; //если мы зашли в первый раз у нас 10 секунд, либо достали значение из localstorage
    timer.innerHTML = restTimeToAnswer; //обновляем значение таймера на странице
 
    function countTime() { //логика работы таймера
        if (restTimeToAnswer) { //если не false
            tm = setTimeout(function() { // устанавливаем таймаут
                restTimeToAnswer--; // уменьшаем время на секунду
                timer.innerHTML = restTimeToAnswer; // показываем пользователю, сколько осталось
                localStorage.restTime = restTimeToAnswer; // обновляем localstorage
                countTime(); //запускаем еще раз эту функцию 
            }, ONE_SECOND); //через секунду
        } else { //иначе
            location.href = 'http://example.com'; //есдли время истекло переход по урлу
        }
    }
 
    rightAnswer.onclick = function() { //при правильном ответе
        clearInterval(tm); //сбрасываем таймер
        restTimeToAnswer = localStorage.restTime = TIME_FOR_ANSWER; //обновляем localstorage и время для ответа
        timer.innerHTML = restTimeToAnswer; //обновляем DOM
        countTime(); //запукаем счетчик заново
    }
 
    countTime();//запуск счетчика
});

Первоначально у тебя скрипт не работал, потому что он находился выше основной разметки, а в скрипте происходило обращение к элементам DOM, которые еще не отрендерились.

Добавлено через 5 минут
Слишком много ожиданий у тебя от клиентского javascripta) Чтобы он не приостанавливался вообще при перезагрузке, надо будет сильно заморочиться с объектом Date. Может и проще можно, но не приходит больше в голову ничего

@maruo · 04.02.2016, 22:13 **[ТС]**

jade,В любом случае спасибо)

@maruo · 08.02.2016, 01:00 **[ТС]**

Вот Нашел исходник переделал для себя

Как добавить +10 секунд, что бы время прибавилось к тому что осталось, когда нажали на кнопку

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<canvas id="myCanvas" ></canvas>
<script>
  var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 10E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 4,
    lineColor = "rgb(0, 250, 255)",
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;
 
function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = lineColor;
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (location.href = 'http://example.com');
    timer = window.setTimeout(go, 50)
    
}
go();
</script>

Добавлено через 9 часов 54 минуты
Решено

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = 10E3,
    timeStart = (new Date).getTime(),
    canvasSize = 200,
    lineWidth = 4,
    lineColor = "rgb(0, 250, 255)",
    drawX = drawY = radius = canvasSize / 2;
  radius -= lineWidth / 2;
  myCanvas.width = canvasSize;
  myCanvas.height = canvasSize;
  
  addTime.onclick = function(){ 
 timeLimit = ((new Date).getTime() - timeStart) + timeLimit;
}
  function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = lineColor;
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (location.href = 'result_game_inc.php?endtime=0');
    timer = window.setTimeout(go, 50)
 
  }
 
  go();

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	04.02.2016, 20:30 [ТС]
	jade, Он вообще не реагирует, не запускается 0

@jade 23 / 23 / 11 Регистрация: 28.02.2015 Сообщений: 61
	04.02.2016, 21:26
	Странно, я проверил в трех браузерах, во всех работает. А ты из какого браузера cкрипт запускаешь? И еще ты скрипт где подключаешь? Перед закрывающим тэгом body или в heade? Нужно первое, либо весь скрипт обернуть в document.addEventListener('DOMContentLoa ded', handler); 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	04.02.2016, 22:03 [ТС]
	jade, сейчас заработал, но когда я обновляют страницу, скрипт ПРИОСТАНАВливается.Тоесть пауза. Было бы не плохо если бы вы закомментировали код, я бы так смог его поправить как мне нужно . И доделать со временем Добавлено через 19 минут Приостанавливается когда постоянно жмешь f5 ,а то мб я запутаю вас) 0

@maruo 133 / 133 / 48 Регистрация: 26.04.2013 Сообщений: 1,356
	04.02.2016, 22:13 [ТС]
	jade,В любом случае спасибо) 0