Форум

SLameN · #1 (**permalink**) 01.07.2014, 15:32

Имеется скрипт:

<script type="text/javascript">
    var timer;
    function start_timer()
    {
        if (timer) clearInterval(timer);
        secs = 0;
        document.getElementById('timer').innerHTML = secs + ' сек.';
        timer = setInterval(
            function () {
                secs++;
                document.getElementById('timer').innerHTML = + secs + ' сек.';
            },
            1000
        );
    }
</script>

<div id="timer"></div>

        <form method="post">
            <select>
                <option>Начало</option>
                <option>Окончание</option>
            </select>

            <input type="submit" value="Сохранить" class="button" onclick="start_timer()" />
        </form>

1. Как переводить секунды в минуты, а минуты в часы? Сейчас всегда секунды.
2. При нажатии на submit секунды появляются и исчезают
3. Чтобы при перезагрузке страницы время не сбрасывалось, это уже ajax? Если да, то много нужно писать?

рони · #2 (**permalink**) 01.07.2014, 15:59

SLameN,
а тонны таймеров на форуме вас неустраивают? посмотрите как они сделаны

SLameN · #3 (**permalink**) 01.07.2014, 16:18

Да, но проблема же не только в этом

Вот например я взял ваш пример

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
   $(function ()
   		{
   				var timers, ret;
   				$(":button")
   				.click(function ()
   						{
   								$(this)
   								.val("\u25b6" == $(this)
   										.val()? "\u25fc": "\u25b6")
   								.prev()
   								.data(
   										{
   										timer: (new Date)
   												.getTime()
   										}
   								)
   								.toggleClass("timer");
   								timers = $(".timer");
   								timers.size() && Timer()
   						}
   				);

   				function two(a) {
   						return (9 < a? "": "0") + a
   				}

   				function formatTime(a) {
   						a = Math.floor(a / 1E3);
   						var b = Math.floor(a / 60),
   						c = Math.floor(b / 60);
   						a %= 60;
   						b %= 60;
   						return two(c) + " : " + two(b) + " : " + two(a)
   				}

   				function Timer() {
   						window.clearTimeout(ret);
   						timers.each(function (a, b)
   								{
   										var c = (new Date)
   										.getTime() - $(b)
   										.data("timer") | 0,
   										c = formatTime(c);
   										$(b)
   										.html(c)
   								}
   						);
   						timers.size() && (ret = window.setTimeout(Timer, 1000))
   				};

   		}
   );
  </script>

<div id="timer">00 : 00 : 00</div>

        <form method="post">
            <select>
                <option>Начало</option>
                <option>Окончание</option>
            </select>

<input type="submit" value="Сохранить" class="button" />
        </form>

1. Как заставить работать таймер по кнопке submit?
2. Как время выводить в блок - timer
3. Как сделать ajax, перезагрузка страницы не сбивала таймер

рони · #4 (**permalink**) 01.07.2014, 16:51

SLameN,
1.2

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
   $(function ()
   		{
   				var timers, ret;
   				$(".button")
   				.click(function ()
   						{
                                var go = $("select").val() == "Начало" ;
   								$("#timer")
   								.data(
   										{
   										timer: (new Date)
   												.getTime()
   										}
   								)
   								[(go ? "add" : "remove") + "Class"]("timer");
   								timers = $(".timer");
   								timers.size() && Timer()
   						}
   				);

   				function two(a) {
   						return (9 < a? "": "0") + a
   				}

   				function formatTime(a) {
   						a = Math.floor(a / 1E3);
   						var b = Math.floor(a / 60),
   						c = Math.floor(b / 60);
   						a %= 60;
   						b %= 60;
   						return two(c) + " : " + two(b) + " : " + two(a)
   				}

   				function Timer() {
   						window.clearTimeout(ret);
   						timers.each(function (a, b)
   								{
   										var c = (new Date)
   										.getTime() - $(b)
   										.data("timer") | 0,
   										c = formatTime(c);
   										$(b)
   										.html(c)
   								}
   						);
   						timers.size() && (ret = window.setTimeout(Timer, 1000))
   				};

   		}
   );
  </script>

</head>

<body>
   <div id="timer">00 : 00 : 00</div>

        <form method="post" onsubmit="return false">
            <select>
                <option>Начало</option>
                <option>Окончание</option>
            </select>

<input type="submit" value="Сохранить" class="button" />
        </form>

</body>

</html>

3. ищите таймер с сохранением -- такие тоже есть на форуме

Форум

Справочник

Discord чат

Курсы javascript