Динамические часы В поиске

Дней на работу: 2 Стоимость работы: 100

Доброго времени суток, на сайте выводятся часы с помощью функций PHP определенного часового пояса
<?php
date_default_timezone_set("UTC"); // Устанавливаем часовой пояс по Гринвичу
  $time = time(); // Вот это значение отправляем в базу
  $offset = 2; // Допустим, у пользователя смещение относительно Гринвича составляет +3 часа
  $time += 2 * 3600; // Добавляем 3 часа к времени по Гринвичу
  echo date("H:i:s", $time); // Выводим время пользователя, согласно его часовому поясу
Естественно они статичные
Нужно заставить их идти. В интернетах вычитал, что можно это сделать через JS.
Кто может реализовать такую задачу?

PS: В поле стоимости указал просто цифру, ума не приложу сколько стоит подобная задача.

Появилась необходимость пояснить условие задачи:
В Калининграде время всегда на час меньше чем в Москве
Мне нужно, что бы любой пользователь с любого региона (хоть с Камчатки, хоть с Бразилии) зашел на сайт и увидел Калининградское время.
Никаких сравнений этого времени делать не нужно, показывать, работает магазин или нет — тоже не нужно.
20 октября 2016, 23:37    Evgeny Tarasov   
2    562

Комментарии (53)

  1. Марат Марабар 21 октября 2016, 00:22 # 0
    А почему только на JS+CSS не сделать, без PHP? А время брать с компа пользователя.
    Сразу отпадает высчитывание смещения.

    Если мой вариант подойдёт, прям сейчас могу архив отправить.
    1. Sergey Pozhidaev 21 октября 2016, 07:03 # 0
      Ну смею предположить что есть время работы самого сайта (магазина) которое с локальным временем (часовым поясом) пользователя никак не соотносится. Поэтому через PHP получаем текущее время сервера и закидываем его как аргумент js-скрипту.
      1. Сергей Шлоков 21 октября 2016, 08:58 # 0
        А как в вашем варианте определить часовой пояс пользователя через php?
        П.С. Кстати, за 2 дня работы 100 руб. маловато. Накиньте хотя бы ещё полтинник. )
        1. Sergey Pozhidaev 21 октября 2016, 09:01 # 0
          Никак, я предположил что у сайта есть время работы, типа показывать что сайт закрыт в данный момент. Как это определять javascript-ом?
          1. Сергей Шлоков 21 октября 2016, 09:05 # 0
            Javascript берёт текущее время на компе пользователя. Пользователь сам выставляет его в системе и оно соответствует его поясу. И не нужны никакие заморочки с определением пояса.
            А сервер может находится в Лондоне.
            1. Evgeny Tarasov 21 октября 2016, 10:09 # 0
              Вот вы правильно предположили, офис компании находится в Калининграде, и на сайте нужно показывать их время
              1. Sergey Pozhidaev 21 октября 2016, 10:13 # 0
                Евгений, возьмите за основу скрипт, который ниже выложил Михаил но вместо текущего времени вставьте туда время сервера функцией time()
                Если знаний не хватит — напишите, выложу готовое решение.
                P.S. Часовой пояс сервера должен быть настроен на Калининград.
                1. Evgeny Tarasov 21 октября 2016, 10:27 # 0
                  Помогите пожалуйста, я и обратился к сообществу, потому что знаний не хватает(
                  Сообразил только как через PHP это сделать (в задаче код прикладывал)
                  Или отдельно через JS, а как это дело связать, да еще и в MODX вообще не представляю(
                  1. Sergey Pozhidaev 21 октября 2016, 11:43 # 0
                    Вообщем если я правильно понял задачу, вам нужно вывести текущее время магазина, чтобы пользователь мог его сравнить с Часами работы магазина и понять что купить что-то (или чего еще) в данный момент можно/нельзя.
                    Берете классический скрипт, который скинул Михаил, толоко вставляете туда время сервера:
                    <script>
                    function digitalWatch() {
                        var date = new Date([[!time]]);
                        var hours = date.getHours();
                        var minutes = date.getMinutes();
                        var seconds = date.getSeconds();
                        if (hours < 10) hours = "0" + hours;
                        if (minutes < 10) minutes = "0" + minutes;
                        if (seconds < 10) seconds = "0" + seconds;
                        document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                        setTimeout("digitalWatch()", 1000);
                    }
                    window.onload=digitalWatch;
                    </script>
                    
                    Создаете сниппет time, вызываете его в скрипте, некэшируемым.
                    В сниппите return time();
                    1. Марат Марабар 21 октября 2016, 12:04 # 0
                      Не получится так.

                      Если время терпит, я завтра к другому компу доберусь — там есть у меня то что вам надо.
                      1. Sergey Pozhidaev 21 октября 2016, 12:06 # 0
                        del
                        1. Sergey Pozhidaev 21 октября 2016, 12:07 # 0
                          Что не получится?
                          1. Марат Марабар 21 октября 2016, 12:15 # 0
                            Будет тоже самое — статическое время.
                            1. Evgeny Tarasov 21 октября 2016, 12:28 # 0
                              Спасибо, я сегодня попробую предложенный вариант, и отпишусь по результатам.
                              1. Sergey Pozhidaev 21 октября 2016, 12:30 # 0
                                Ну смысл я думаю понятен, только js скрипт нужен другой, чтобы брал начальное значение и от него уже показывал время. Невнимательно посмотрел.
                                1. Evgeny Tarasov 21 октября 2016, 13:54 # 0
                                  Сергей, увы, но этот вариант не работает, время статичное показывается, да к тому же не понятно какого часового пояса)
                                  1. Evgeny Tarasov 21 октября 2016, 14:06 # 0
                                    Марат, попробовал предложенный вариант — не сработал(
                                    Время статическое, и кроме того — еще и непонятно какого часового пояса(
                                    Если есть возможность, можете помочь в данном вопросе?
                                    1. Марат Марабар 21 октября 2016, 16:21 # 0
                                      Да-да. Я на даче, завтра приеду в город и скину.
                                      1. Evgeny Tarasov 21 октября 2016, 16:49 # 0
                                        Марат, спасибо что откликнулись, ниже появился человек, написал как все сделать, все работает!
                                      2. Сергей Шлоков 21 октября 2016, 12:30 # 0
                                        В яваскрипте вызывать сниппет?
                                        1. Sergey Pozhidaev 21 октября 2016, 12:31 # 0
                                          А что, с этим проблемы какие-то?
                                          1. Сергей Шлоков 21 октября 2016, 12:35 # 0
                                            А с какой версии яваскрипт начал поддерживать сниппеты MODX?

                                            П.С.Ответ-то я конечно подозреваю какой будет, но об этом выше нигде сказано не было и новичок MODX об этом естественно ничего не знает.
                                            1. Sergey Pozhidaev 21 октября 2016, 12:38 # 0
                                              Я предложил решение, топикстартеру осталось найти нужный скрипт и передать туда текущее время сервера через сниппет, по-моему все просто.
                                  2. Evgeny Tarasov 21 октября 2016, 10:03 # 0
                                    Вы верно пошутили, но стоимость поставлена потому что поле для заполнения было обязательным
                                2. Evgeny Tarasov 21 октября 2016, 10:00 # 0
                                  Спасибо, что откликнулись, но таких вариантов в интернете тысячи, и они не подходят
                                  1. Марат Марабар 21 октября 2016, 10:05 # 0
                                    Ну ты время пользователя через PHP не определишь — это не возможно.
                                    1. Evgeny Tarasov 21 октября 2016, 10:11 # 0
                                      Через php можно время определённого часового пояса определить, это нужно
                                      1. Сергей Шлоков 21 октября 2016, 12:32 # 0
                                        Из описания совершенно непонятно какая стоит задача. Если нужно на сайте выводить время работы магазина, то зачем нужно определять часовой пояс пользователя? Напишите подробнее, что нужно, тогда и помощь будет точней.
                                        1. Evgeny Tarasov 21 октября 2016, 13:58 # 0
                                          Сергей)
                                          Я в первом предложении указал, что на сайте выводятся часы ОПРЕДЕЛЕННОГО часового пояса.
                                          Т.Е. время именно этого часового пояса должно показываться на сайте.
                                          Его ни с чем сравнивать не нужно, просто показать, что в Калининграде сейчас столько то)
                                          1. Evgeny Tarasov 21 октября 2016, 14:04 # 0
                                            На всякий случай пояснил задачу)
                                  2. Марат Марабар 21 октября 2016, 00:25 # 0
                                    Кстати, будет выглядеть так:

                                    1. Воеводский Михаил 21 октября 2016, 00:36 # +3
                                      function digitalWatch() {
                                          var date = new Date();
                                          var hours = date.getHours();
                                          var minutes = date.getMinutes();
                                          var seconds = date.getSeconds();
                                          if (hours < 10) hours = "0" + hours;
                                          if (minutes < 10) minutes = "0" + minutes;
                                          if (seconds < 10) seconds = "0" + seconds;
                                          document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                                          setTimeout("digitalWatch()", 1000);
                                      }
                                      window.onload=digitalWatch;

                                      Полностью на JS, время с локального компа. Оформление — дело вкуса. Строку вида 09:01:50 закидывает в элемент с id=«digital_watch».
                                      1. Дмитрий Меркурьев 21 октября 2016, 14:37 # +4
                                        Если нужна синхронизация времени с сервером, то:
                                        1. Пишем небольшой сниппет getWatch
                                        <?php
                                        $time = time();
                                        //Если время сервера отличается от правильного то прибавляем или вычитаем от time кол-во секунд. Пример:
                                        //$time += 3600;
                                        return '<div id="digitalWatch" data-time="'.$time.'"></div>';
                                        
                                        2. Вставляем его туда, где нужно выводить часы, обязательно некешированным
                                        [[!getWatch]]
                                        
                                        3. Добавляем js в основной js-файл сайта
                                        $(function(){
                                        	var $dw = $('#digitalWatch');
                                        	if ($dw){
                                        		var delta = 0;
                                        		function makeWatch(){
                                        			var currentDate = new Date().getTime();
                                        			currentDate += delta;
                                        			var currentServerDate = new Date(currentDate);
                                        			var hours = currentServerDate.getHours();
                                        			var minutes = currentServerDate.getMinutes();
                                        			var seconds = currentServerDate.getSeconds();
                                        			if (hours < 10) hours = "0" + hours;
                                        			if (minutes < 10) minutes = "0" + minutes;
                                        			if (seconds < 10) seconds = "0" + seconds;
                                        			$dw.html(hours + ":" + minutes + ":" + seconds);
                                        			setTimeout(makeWatch, 1000);
                                        		}
                                        
                                        		var serverTime = parseInt($dw.data('time'))*1000;
                                        		var clientTime = new Date().getTime();
                                        		delta = serverTime-clientTime;
                                        		makeWatch();
                                        	}
                                        });
                                        
                                        1. Evgeny Tarasov 21 октября 2016, 15:12 # 0
                                          Вот оно, то что нужно!
                                          Мил человек, скинь в личку свой кошелек, яндексденег или номер карты.
                                          1. Дмитрий Меркурьев 21 октября 2016, 20:07 # 0
                                            Отправил через лк, незнаю дошло ли) должно на почту придти.
                                          2. Марат Марабар 21 октября 2016, 18:36 # 0
                                            Супер!
                                            Кстати можно стилизовать, как на картинке выше, немного изменив скрипт и добавив стилей.
                                            1. Evgeny Tarasov 22 октября 2016, 13:23 # 0
                                              Марат, подскажите, какое было у вас решение
                                              Решение представленное выше не работает(
                                              Время в том решение зависит от времени на компе.
                                              1. Марат Марабар 22 октября 2016, 19:19 # 0
                                                Ну вы даёте. Я опять не в городе.
                                            2. Evgeny Tarasov 22 октября 2016, 13:19 # 0
                                              это не серверное время
                                              это с компа берется, я меняю время у себя на компе, и на сайте оно тоже меняется
                                              1. Дмитрий Меркурьев 22 октября 2016, 13:35 # 0
                                                Время выводится с вычислением разницы, между сервером и клиентом. Потом это дельта прибавляется или вычитается от времени клиента. Тут все просто, на сервере допустим 13.00 на клиенте 15.00 при запуске скрипта вычисляется дельта 2 часа и при каждой итерации от времени клиента вычитаются эти два часа.
                                                Проверьте подключение сниппета и js.
                                                Можно сделать вообще без участия времени клиента, а прибавлять к серверному времени при каждой итерации по 1 секунде, но тут может накапливаться небольшая ошибка, таймер в js не идеален.
                                                1. Дмитрий Меркурьев 22 октября 2016, 13:59 # 0
                                                  Вот js для такого варианта, сниппет остается тот же, заменить только js.
                                                  $(function(){
                                                  	var $dw = $('#digitalWatch');
                                                  	if ($dw){
                                                  		var serverTime = 0;
                                                  		
                                                  		function makeWatch(){
                                                  			var currentServerDate = new Date(serverTime*1000);
                                                  			var hours = currentServerDate.getHours();
                                                  			var minutes = currentServerDate.getMinutes();
                                                  			var seconds = currentServerDate.getSeconds();
                                                  			if (hours < 10) hours = "0" + hours;
                                                  			if (minutes < 10) minutes = "0" + minutes;
                                                  			if (seconds < 10) seconds = "0" + seconds;
                                                  			$dw.html(hours + ":" + minutes + ":" + seconds);
                                                  			serverTime++;
                                                  			setTimeout(makeWatch, 1000);
                                                  		}
                                                  
                                                  		serverTime = parseInt($dw.data('time'));
                                                  		makeWatch();
                                                  	}
                                                  });
                                                  
                                                  1. Evgeny Tarasov 22 октября 2016, 16:42 # 0
                                                    этот скрипт тоже не работает
                                                    Я не знаю, может быть не по русски описание написал, но, мне на сайте нужно просто показывать время одного города, Калининграда, вне зависимости откуда заходит клиент.
                                                    1. Дмитрий Меркурьев 22 октября 2016, 17:07 # 0
                                                      Второй вариант вообще на время клиента не смотрит и выводит время сервера, если на нем Калининград, то и показывать будет Калининград, внесите поправку времени в сниппете и для всех будет показываться одно и тоже время всегда. А проще напишите в скайп и выявим причину почему не работает.
                                                      1. Evgeny Tarasov 22 октября 2016, 18:00 # 0
                                                        Посмотрите пожалуйста
                                                        yadi.sk/i/icatMW7IxP2WP
                                                        1. Дмитрий Меркурьев 22 октября 2016, 18:18 # 0
                                                          Тогда попробуйте UTC время использовать в js:
                                                          $(function(){
                                                          	var $dw = $('#digitalWatch');
                                                          	if ($dw){
                                                          		var serverTime = 0;
                                                          		
                                                          		function makeWatch(){
                                                          			var currentServerDate = new Date(serverTime*1000);
                                                          			var hours = currentServerDate.getUTCHours();
                                                          			var minutes = currentServerDate.getUTCMinutes();
                                                          			var seconds = currentServerDate.getUTCSeconds();
                                                          			if (hours < 10) hours = "0" + hours;
                                                          			if (minutes < 10) minutes = "0" + minutes;
                                                          			if (seconds < 10) seconds = "0" + seconds;
                                                          			$dw.html(hours + ":" + minutes + ":" + seconds);
                                                          			serverTime++;
                                                          			setTimeout(makeWatch, 1000);
                                                          		}
                                                          
                                                          		serverTime = parseInt($dw.data('time'));
                                                          		makeWatch();
                                                          	}
                                                          });
                                                          
                                                          Только поправку в сниппете придется сделать немного другую. В таком варианте время перестало меняться при смене часового пояса.
                                            3. Марат Марабар 22 октября 2016, 19:24 # 0
                                              Я всё-таки настаиваю — не использовать PHP.
                                              Если взять скрипт от Михаила и переделать одну строчку, то должно работать

                                              <div id="digital_watch"></div>
                                              <script>
                                              function digitalWatch() {
                                                  var date = new Date();
                                                  var hours = date.getUTCHours() + 3; // Время UTC + (требуемая разница)
                                                  var minutes = date.getMinutes();
                                                  var seconds = date.getSeconds();
                                                  if (hours < 10) hours = "0" + hours;
                                                  if (minutes < 10) minutes = "0" + minutes;
                                                  if (seconds < 10) seconds = "0" + seconds;
                                                  document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                                                  setTimeout("digitalWatch()", 1000);
                                              }
                                              window.onload=digitalWatch;
                                              </script>
                                              
                                              1. Дмитрий Меркурьев 22 октября 2016, 19:53 # 0
                                                а что покажет когда по UTC будет 23 часа?
                                                1. Марат Марабар 22 октября 2016, 20:01 # 0
                                                  Date() умеет с этим работать. Если какой то параметр выходит за пределы ожидаемого, то переписываются другие.
                                                  1. Дмитрий Меркурьев 22 октября 2016, 20:15 # 0
                                                    Только прибавляете вы уже после того как получили значение от Date. Проверьте что получится.
                                                    1. Марат Марабар 22 октября 2016, 20:35 # 0
                                                      Точно. Записать надо сначала через date.setHours().
                                                2. Evgeny Tarasov 22 октября 2016, 19:54 # 0
                                                  Марат, а у человека на Камчатке тоже будет показываться Калининградское время?
                                                  1. Марат Марабар 22 октября 2016, 20:03 # 0
                                                    Да, при условии что на его компе правильно выставлена дата.
                                                  2. Марат Марабар 22 октября 2016, 21:02 # 0
                                                    Надеюсь окончательный вариант.

                                                    <div id="digital_watch"></div>
                                                    <script>
                                                    function digitalWatch() {
                                                        var date = new Date();
                                                        date.setHours(date.getUTCHours() + 3); // Время UTC + (требуемая разница)
                                                        var hours = date.getHours();
                                                        var minutes = date.getMinutes();
                                                        var seconds = date.getSeconds();
                                                        if (hours < 10) hours = "0" + hours;
                                                        if (minutes < 10) minutes = "0" + minutes;
                                                        if (seconds < 10) seconds = "0" + seconds;
                                                        document.getElementById("digital_watch").innerHTML = hours + ":" + minutes + ":" + seconds;
                                                        setTimeout("digitalWatch()", 1000);
                                                    }
                                                    window.onload=digitalWatch;
                                                    </script>
                                                    
                                                  Вы должны авторизоваться, чтобы оставлять комментарии.