Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вывод значений таймера в div (https://javascript.ru/forum/xhtml-html-css/40007-vyvod-znachenijj-tajjmera-v-div.html)

Tylmaril 21.07.2013 01:32

Вывод значений таймера в div
 
Доброго времени суток.
Имееться блок div и кнопка.По нажатию кнопки должен включиться таймер и ,отсчитав нужный мне промежуток времени,выдать сообщение и обнулиться.При этом мне бы хотелось чтобы в блоке div отображался этот самый отсчет,с чем у меня собственно и возникли проблемы.В скрипте после первого вывода значения в div стоит алерт(причина в том,что он по моим ощущения стопает скрипт,и я могу поэтапно убедиться что скрипт работает правильно и значения действительно по очереди заносяться в блок div),но без алерта в блоке div отображаеться сразу timeout,что меня не устраивает.Как можно сделать так,чтобы значения таймера отображались постепенно и с задержкой по времени.
С языком только знакомлюсь, поэтому по возможности пояснить максимально просто,если есть грубые ошибки в коде,то так же было бы неплохо на них указать,буду благодарен.

ниже приведены куски кода html

<head>
</head>
<body>
<div id="time_div">  00:30   </div>
<div>
<input id="button" type="button" value=" кнопка "/>
</div>
</body>




и самой странички скрипта соответственно

window.onload = function()
{

var i = 30;
var time_div = document.getElementById('time_div');



	document.getElementById('button').onclick = function()
	{
		function timer()
		{
		for (i <= 30; i >= 25; i--)
			{
				time_div.innerHTML = "00:"+i;
				alert(i);			
			}
			if (i == 25);
			{
				time_div.innerHTML = "timeout";
				clearInterval(timer)
			}	
		}
	setInterval(timer,2000);
	}

рони 21.07.2013 01:50

Цитата:

Сообщение от Tylmaril
i <= 30;

:stop:
http://learn.javascript.ru/while-for#цикл-for

рони 21.07.2013 02:02

Tylmaril,
:write:
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
        <script>
            window.onload = function () {
                var i = 30;
                var time_div = document.getElementById('time_div');

                function timer() {

                    // alert(i);
                    if (i < 25) {
                        time_div.innerHTML = "timeout";
                    } else {
                        time_div.innerHTML = "00:" + i;
                        i--
                        window.setTimeout(timer, 2000);
                    }


                }

                document.getElementById('button').onclick = timer
            }
        </script>
</head>

<body>

           <div id="time_div">00:30</div>
            <div>
                <input id="button" type="button" value=" кнопка" />
            </div>
    </body>




</html>

Tylmaril 21.07.2013 13:05

Спасибо,заработало,но я не совсем понял,ошибка была только из за цикла for?

рони 21.07.2013 13:22

Tylmaril,
цикл написан был некорректно да и ненужен плюс фигурные скобки одна не парная - после условия точка с запятой зачемто if (i == 25);

Tylmaril 21.07.2013 15:58

Что то я не могу обнулить теперь таймер,правильная ли такая запись?

if (i < 25) 
{
time_div.innerHTML = "timeout";
clearTimeOut(timer);
}

рони 21.07.2013 16:43

Tylmaril,
в данном случае это бессмысленно timer функция и в обнулении ненуждается -- она сама решает запустится ли ей ещё раз или уже хватит если нужно снова запустить установите i больше 25 и запустите таймер

Tylmaril 21.07.2013 16:47

После вывода timeout присвоил i=30;.
Таймер заработал как надо,благодарю за помощь.


Часовой пояс GMT +3, время: 17:27.