Jquery установить время, часовой пояс

65

MiladyX

21 декабря 2011, 15:26

5960

Прошу помощи.

Вот есть интересный скрипт часов но время он показывает походу с компьютера посетителя, а как установить нужное постоянное время там например из города Вашингтон США, т.е. как установить там часовой пояс?

вот часть файла фукций, отвечающих за время:


 $.fn.displayClock = function(el) {

        $.fn.getTime(el);

        setTimeout(function() {$.fn.displayClock(el)}, $.fn.delay());

    }



    $.fn.displayWeather = function(el) {

        $.fn.getWeather(el);

        if (el.weatherUpdate > 0) {

            setTimeout(function() {$.fn.displayWeather(el)}, (el.weatherUpdate * 60 * 1000));

        }

    }



    $.fn.delay = function() {

        var now = new Date();

        var delay = (60 - now.getSeconds()) * 1000;

        

        return delay;

    }



    $.fn.getTime = function(el) {

        var now = new Date();

        var old = new Date();

        old.setTime(now.getTime() - 60000);

        

        var now_hours, now_minutes, old_hours, old_minutes, timeOld = '';

        now_hours =  now.getHours();

        now_minutes = now.getMinutes();

        old_hours =  old.getHours();

        old_minutes = old.getMinutes();



        if (el.am_pm) {

            var am_pm = now_hours > 11 ? 'pm' : 'am';

            now_hours = ((now_hours > 12) ? now_hours - 12 : now_hours);

            old_hours = ((old_hours > 12) ? old_hours - 12 : old_hours);

        } 



        now_hours   = ((now_hours <  10) ? "0" : "") + now_hours;

        now_minutes = ((now_minutes <  10) ? "0" : "") + now_minutes;

        old_hours   = ((old_hours <  10) ? "0" : "") + old_hours;

        old_minutes = ((old_minutes <  10) ? "0" : "") + old_minutes;

        // date

        el.currDate = el.lang.dayNames[now.getDay()] + ',&nbsp;' + now.getDate() + '&nbsp;' + el.lang.monthNames[now.getMonth()];

        // time update

        el.timeUpdate = el.currDate + ',&nbsp;' + now_hours + ':' + now_minutes;



        var firstHourDigit = old_hours.substr(0,1);

        var secondHourDigit = old_hours.substr(1,1);

        var firstMinuteDigit = old_minutes.substr(0,1);

        var secondMinuteDigit = old_minutes.substr(1,1);

        

        timeOld += '<div id="hours"><div class="line"></div>';

        timeOld += '<div id="hours_bg"><img src="' + el.clockImagesPath + 'clockbg1.png" /></div>';

        timeOld += '<img src="' + el.clockImagesPath + firstHourDigit + '.png" id="fhd" class="first_digit" />';

        timeOld += '<img src="' + el.clockImagesPath + secondHourDigit + '.png" id="shd" class="second_digit" />';

        timeOld += '</div>';

        timeOld += '<div id="minutes"><div class="line"></div>';

        if (el.am_pm) {

            timeOld += '<div id="am_pm"><img src="' + el.clockImagesPath + am_pm + '.png" /></div>';

        }

        timeOld += '<div id="minutes_bg"><img src="' + el.clockImagesPath + 'clockbg1.png" /></div>';

        timeOld += '<img src="' + el.clockImagesPath + firstMinuteDigit + '.png" id="fmd" class="first_digit" />';

        timeOld += '<img src="' + el.clockImagesPath + secondMinuteDigit + '.png" id="smd" class="second_digit" />';

        timeOld += '</div>';



        el.find('#clock').html(timeOld);



        // set minutes

        if (secondMinuteDigit != '9') {

            firstMinuteDigit = firstMinuteDigit + '1';

        }



        if (old_minutes == '59') {

            firstMinuteDigit = '511';

        }



        setTimeout(function() {

            $('#fmd').attr('src', el.clockImagesPath + firstMinuteDigit + '-1.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg2.png');

        },200);

        setTimeout(function() { $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg3.png')},250);

        setTimeout(function() {

            $('#fmd').attr('src', el.clockImagesPath + firstMinuteDigit + '-2.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg4.png');

        },400);

        setTimeout(function() { $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg5.png')},450);

        setTimeout(function() {

            $('#fmd').attr('src', el.clockImagesPath + firstMinuteDigit + '-3.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg6.png');

        },600);



        setTimeout(function() {

            $('#smd').attr('src', el.clockImagesPath + secondMinuteDigit + '-1.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg2.png');

        },200);

        setTimeout(function() { $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg3.png')},250);

        setTimeout(function() {

            $('#smd').attr('src', el.clockImagesPath + secondMinuteDigit + '-2.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg4.png');

        },400);

        setTimeout(function() { $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg5.png')},450);

        setTimeout(function() {

            $('#smd').attr('src', el.clockImagesPath + secondMinuteDigit + '-3.png');

            $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg6.png');

        },600);



        setTimeout(function() {$('#fmd').attr('src', el.clockImagesPath + now_minutes.substr(0,1) + '.png')},800);

        setTimeout(function() {$('#smd').attr('src', el.clockImagesPath + now_minutes.substr(1,1) + '.png')},800);

        setTimeout(function() { $('#minutes_bg img').attr('src', el.clockImagesPath + 'clockbg1.png')},850);



        // set hours

        if (now_minutes == '00') {

           

            if (el.am_pm) {

                if (now_hours == '00') {                   

                    firstHourDigit = firstHourDigit + '1';

                    now_hours = '12';

                } else if (now_hours == '01') {

                    firstHourDigit = '001';

                    secondHourDigit = '111';

                } else {

                    firstHourDigit = firstHourDigit + '1';

                }

            } else {

                if (now_hours != '10') {

                    firstHourDigit = firstHourDigit + '1';

                }



                if (now_hours == '20') {

                    firstHourDigit = '1';

                }



                if (now_hours == '00') {

                    firstHourDigit = firstHourDigit + '1';

                    secondHourDigit = secondHourDigit + '11';

                }

            }



            setTimeout(function() {

                $('#fhd').attr('src', el.clockImagesPath + firstHourDigit + '-1.png');

                $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg2.png');

            },200);

            setTimeout(function() { $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg3.png')},250);

            setTimeout(function() {

                $('#fhd').attr('src', el.clockImagesPath + firstHourDigit + '-2.png');

                $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg4.png');

            },400);

            setTimeout(function() { $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg5.png')},450);

            setTimeout(function() {

                $('#fhd').attr('src', el.clockImagesPath + firstHourDigit + '-3.png');

                $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg6.png');

            },600);



            setTimeout(function() {

            $('#shd').attr('src', el.clockImagesPath + secondHourDigit + '-1.png');

            $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg2.png');

            },200);

            setTimeout(function() { $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg3.png')},250);

            setTimeout(function() {

                $('#shd').attr('src', el.clockImagesPath + secondHourDigit + '-2.png');

                $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg4.png');

            },400);

            setTimeout(function() { $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg5.png')},450);

            setTimeout(function() {

                $('#shd').attr('src', el.clockImagesPath + secondHourDigit + '-3.png');

                $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg6.png');

            },600);



            setTimeout(function() {$('#fhd').attr('src', el.clockImagesPath + now_hours.substr(0,1) + '.png')},800);

            setTimeout(function() {$('#shd').attr('src', el.clockImagesPath + now_hours.substr(1,1) + '.png')},800);

            setTimeout(function() { $('#hours_bg img').attr('src', el.clockImagesPath + 'clockbg1.png')},850);

        }

    }

заранее спасибо.

65

MiladyX

21 декабря 2011, 22:32

#1

Народ, ну подскажите кто то, тут в переменной old_hours часы числами (1, 2, 3....) это часы, которые берутся с компьютера пользователя, но как мне не брать время с компьютера пользователя, а задать свое время в скрипте? Нужно показывать время в определенном городе...

Ask local показывает местное Упал доход Как правильно настроить задание

N

419

netwind

21 декабря 2011, 23:09

#2

А вы этот вопрос задаете с позиции программиста jquery или javascript ?

если про jquery - ищите другой компонент. других вариантов у вас нет.

если javascript - измените скрипт и воспользуйтесь методами для работы с UTC. их там полно.

1

Кнопка вызова админа ()

65

MiladyX

21 декабря 2011, 23:17

#3

netwind:

А вы этот вопрос задаете с позиции программиста jquery или javascript ?

с позиции человека, который не шарит в jquery, а скачал скрипт часов и хочет его чуть поправить.

Мне кажется, тут не сложно поправить, если знать что :)

В переменную old_hours подставлять текущие часы не с компьютера посетителя, а например Вашингтонского времени.

263

rtyug

21 декабря 2011, 23:56

#4

MiladyX, выбор часового пояса лучше сделать на сервер, возьмите класс какой-то готовый и сделайте...

много кода на js, много алгоритмов надо сделать, чтобы был полноценный часовой пояс

посмотрите в отладке что на выходе $('#fmd') и т.д.

надо посмотреть что в консоле

или я не понял в чем ошибка?

но часики интересные :)

Спалил тему: Pokerstars вывод WMZ, etc на VISA 0% или SWIFT + Конверт USD/GBP,etc (net profit $0,5 млрд) (https://minfin.com.ua/blogs/94589307/115366/) Monobank - 50₴ на счет при рег. тут (https://clck.ru/DLX4r) | Номер SIP АТС Москва 7(495) - 0Ꝑ, 8(800) - 800Ꝑ/0Ꝑ (http://goo.gl/XOrCSn)

I

25

iopiop

22 декабря 2011, 04:39

#5

MiladyX:

с позиции человека, который не шарит в jquery, а скачал скрипт часов и хочет его чуть поправить.

Мне кажется, тут не сложно поправить, если знать что :)
В переменную old_hours подставлять текущие часы не с компьютера посетителя, а например Вашингтонского времени.

1. Получить временнУю зону getTimezoneOffset()

2. Прибавить ее к текущему времени - получим UTC

3. Вашингтон, если мне не изменяет память, живет позади Лондона на 5 часов, значит добавляем -5 (ну или отнимаем 5), получаем время в Вашингтоне.

Не забываем только переводить все в миллисекунды - getTimezoneOffset возвращает в минутах (т.е. умножить на 60000 надо), 5 часов тоже перевести в миллисекунды нужно (умножить на 3600000).

Т.е. вместо строчки old.setTime(....... пишете

old.setTime(old.getTime() + old.getTimezoneOffset() * 60000 - 5 * 3600000);

1

65

MiladyX

22 декабря 2011, 09:12

#6

rtyug, та не, вы сильно накрутили, какие классы, там все проще должно быть.

iopiop:
1. Получить временнУю зону getTimezoneOffset()
2. Прибавить ее к текущему времени - получим UTC
3. Вашингтон, если мне не изменяет память, живет позади Лондона на 5 часов, значит добавляем -5 (ну или отнимаем 5), получаем время в Вашингтоне.

Не забываем только переводить все в миллисекунды - getTimezoneOffset возвращает в минутах (т.е. умножить на 60000 надо), 5 часов тоже перевести в миллисекунды нужно (умножить на 3600000).

Т.е. вместо строчки old.setTime(....... пишете

время то смещается, но опять же, относительно моего системного времени в трее, если я меняю время на компьютере, то и там оно меняется. А мне нужно не зависить от времени посетителя, а постоянно показывать время в Вашингтоне.

N

419

netwind

22 декабря 2011, 09:53

#7

iopiop:
1. Получить временнУю зону getTimezoneOffset()

а эта функция частенько не работает на территории СНГ :) винду не все обновляют.

кстати, такая же проблема и со временем в UTC будет, если кто-то догадается отключить зону и перевести время вручную на 1 час назад. Так делают.

1

65

MiladyX

22 декабря 2011, 12:08

#8

Помогите плз решить задачу...с меня пиво.

Как JS скрипты на сайтах показывают время в определенном городе?

Почему в этом скрипте берется время с компьютера посетителя, где это в коде прописано?

47

gormarket

22 декабря 2011, 13:39

#9

В этом скрипте время с компьютера посетителя берется функцией Date() в функции getTime

var now = new Date();

var old = new Date();

(в функции delay получают только милисекунды до конца текущей секунды)

чтобы показывать время в определенном городе нужно изменить функцию getTime (к полученному времени прибавить некую константу, допустим

"offset", чтобы привести время ко времени заданного города)

...

$.fn.getTime = function(el) {

var now = new Date()+offset;

var old = new Date();

old.setTime(now.getTime() - 60000);

...

а значение offset инициализировать при загрузке данной страницы (добавив на страницу примерно такой код):

<!-- hide

now = new Date();

now_city = new Date("Dec 22 2011 13:25:05");

offset=now_city-now;

// -->

</script>

А вот строку "Dec 22 2011 13:25:05" вставлять при формировани страницы на сервере при ее отдаче клиенту, вычислив текущее время в нужном городе (время на сервере плюс разница часовых поясов сервера и данного города).

Либо запрашивать эту строку javaскриптом с сервера уже после загрузки страницы, один раз - при инициализации offset.

1

Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)

65

MiladyX

22 декабря 2011, 14:07

#10

gormarket, было сделано все как вы сказали, но время в этом варианте совсем пропало.

И как эту строку "Dec 22 2011 13:25:05" подставлять при формировании страницы, на PHP чтоли?

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

На самой странице, где выводятся часы, такая конструкция:

$(document).ready(function() {

$('#digiclock').jdigiclock();

});

</script>

Сами часы выводятся как:

Конструкция файла jquery.jdigiclock.js приведена выше, или можно скачать все файлы по ссылке в стартпосте.

Что делать, если ваша email-рассылка попала в спам

Дзен реализовал для авторов возможность вывода денег через СПБ