Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: progressbar(прогрессбар) и GMT
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » progressbar(прогрессбар) и GMT

Страниц (2): [1] 2 »
 

1. webog - 11 Сентября, 2015 - 10:33:26 - перейти к сообщению
Всем добра!

Есть progressbar на JS. Работает отлично, но если часовой пояс отличный от времени сервера начинает работать не точно. Если разница 5 часов, то и показывает на прогрессбаре не сутки допустим, а 19 часов. А должно 24 часа.
Вопрос: как победить GMT на яве? Или я в не ту сторону думаю?

вот код (Отобразить)


Спасибо!
2. zypikov - 12 Сентября, 2015 - 13:27:03 - перейти к сообщению
Date для JS возвращает дату в местной временной зоне. Вам нужен UTC-вариант соответст. метода вроде getUTCHours(). Не знаю что там вам пых возвращает, но вполне возможно что и на сервере дата должна быть получена в gmt - варианте функ. gmdate().

Все тут подробно:
https://learn[dot]javascript[dot]ru/datetime
http://php.net/manual/en/function.date.php
3. webog - 12 Сентября, 2015 - 13:38:15 - перейти к сообщению
Пых нормально все выводит, у меня проблема с JS. Т.е. нужно отредактировать часть JS.
Можете подробней рассказать что и куда. Я с явой не дружу.
4. zypikov - 12 Сентября, 2015 - 14:32:33 - перейти к сообщению
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.     <script type="text/javascript">
  3.     $(document).ready(function(){
  4.         jQuery.fn.anim_progressbar = function (aOptions) {
  5.             // Определяем значения
  6.             var iCms = 1000;
  7.             var iMms = 60 * iCms;
  8.             var iHms = 3600 * iCms;
  9.             var iDms = 24 * 3600 * iCms;
  10.  
  11.  
  12.             // Определяем опции
  13.             var aDefOpts = {
  14.                     //var date = new Date(2013, 7, 15, 12, 45, 12);
  15.                             //document.write(date);
  16.                 //start: new Date(2015, 8, 8, 14, 30, 12), // Текущее время
  17.                 start: new Date(<?php echo $startd; ?>),
  18.                 //finish: new Date().setTime(new Date().getTime() + 1500 * iCms), // Текущее время  + 60 сек
  19.                 //finish: new Date(2015, 8, 8, 15, 30, 12),
  20.                 //попробуйте добавить смещение временной зоны ко времени окончания счетчика проресс бара
  21.                 finish: new Date(<?php echo $datat; ?>) + new Date().getTimezoneOffset() * 60 * 1000,
  22.  
  23.                 interval: 100
  24.             }
  25.  
  26.             var aOpts = jQuery.extend(aDefOpts, aOptions);
  27.             var vPb = this;
  28.  
  29.             // Кажды индикаторо прогресса
  30.             return this.each(
  31.                 function() {
  32.                     var iDuration = aOpts.finish - aOpts.start;
  33.  
  34.                     // Вызываем оригинальны йиндикатор прогресса
  35.                     $(vPb).children('.pbar').progressbar();
  36.  
  37.                     // Процесс обработки
  38.                     var vInterval = setInterval(
  39.                         function(){
  40.  
  41.                             var iLeftMs = aOpts.finish - new Date(); // Оставшееся врмея в миллисекундах
  42.                             var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
  43.                                 iDays = parseInt(iLeftMs / iDms), // Прошло дней
  44.                                 iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // Прошло часов
  45.                                 iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // Прошло минут
  46.                                 iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // Прошло секунд
  47.                                 iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения
  48.  
  49.                             // Выводим текущее положение и прогресс
  50.                             $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
  51.                             $(vPb).children('.elapsed').html('Осталось '+iDays+' дн. '+iHours+' ч. '+iMin+' мин.:'+iSec+' сек.</b>');
  52.                             $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
  53.  
  54.                             // В случае завершения
  55.                             if (iPerc >= 100) {
  56.                                 clearInterval(vInterval);
  57.                                 $(vPb).children('.percent').html('<b>100%</b>');
  58.                                 $(vPb).children('.elapsed').html('Завершено');
  59.  
  60.                                                             setTimeout(
  61.                                                             function() {
  62.                                                                     location.reload();
  63.                                                             }, 4000
  64.                                                     );
  65.  
  66.  
  67.                             }
  68.                         } ,aOpts.interval
  69.                     );
  70.                 }
  71.             );
  72.         }
  73.  
  74.         // Режим по умолчанию
  75.         $('#progress1').anim_progressbar();
  76.  
  77.         // Для секунд с 5-й по 15-ю
  78.         var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
  79.         var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
  80.         $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
  81.  
  82.         // Устанавливаем интервал обновления в 1 секунду
  83.         $('#progress3').anim_progressbar({interval: 1000});
  84.     });
  85.     </script>
  86.  
5. webog - 12 Сентября, 2015 - 15:37:40 - перейти к сообщению
Спасибо, позже проверю. Но мне кажется проблема тут var iLeftMs = aOpts.finish - new Date(); // Оставшееся врмея в миллисекундах
var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
Т.к. Часть пхп выводит нормально.
6. webog - 12 Сентября, 2015 - 20:44:31 - перейти к сообщению
zypikov, Осталось NaN дн. NaN ч. NaN мин.:NaN сек.

Не получилось. Есть еще варианты?
7. zypikov - 13 Сентября, 2015 - 15:52:42 - перейти к сообщению
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.  
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         jQuery.fn.anim_progressbar = function (aOptions) {
  6.             // Определяем значения
  7.             var iCms = 1000;
  8.             var iMms = 60 * iCms;
  9.             var iHms = 3600 * iCms;
  10.             var iDms = 24 * 3600 * iCms;
  11.  
  12.  
  13.             // Определяем опции
  14.             var aDefOpts = {
  15.                     //var date = new Date(2013, 7, 15, 12, 45, 12);
  16.                             //document.write(date);
  17.                 //start: new Date(2015, 8, 8, 14, 30, 12), // Текущее время
  18.                 start: new Date(<?php echo $startd; ?>),
  19.                 //finish: new Date().setTime(new Date().getTime() + 1500 * iCms), // Текущее время  + 60 сек
  20.                 //finish: new Date(2015, 8, 8, 15, 30, 12),
  21.                 //попробуйте добавить смещение временной зоны ко времени окончания счетчика проресс бара
  22.                 finish: new Date(<?php echo $datat; ?>) + new Date().getTimezoneOffset() * 60 * 1000,
  23.  
  24.                 interval: 100
  25.             }
  26.  
  27.             var aOpts = jQuery.extend(aDefOpts, aOptions);
  28.             var vPb = this;
  29.  
  30.             // Кажды индикаторо прогресса
  31.             return this.each(
  32.                 function() {
  33.                     var iDuration = aOpts.finish - aOpts.start;
  34.  
  35.                     // Вызываем оригинальны йиндикатор прогресса
  36.                     $(vPb).children('.pbar').progressbar();
  37.                     //выведите в консольку значение finish и значение скажите
  38.                     console.info(aOpts.finish)
  39.                     // Процесс обработки
  40.                     var vInterval = setInterval(
  41.                         function(){
  42.  
  43.                             var iLeftMs = aOpts.finish - new Date(); // Оставшееся врмея в миллисекундах
  44.                             var iElapsedMs = new Date() - aOpts.start, // Прошедшее время в миллисекундах
  45.                                 iDays = parseInt(iLeftMs / iDms), // Прошло дней
  46.                                 iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // Прошло часов
  47.                                 iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // Прошло минут
  48.                                 iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // Прошло секунд
  49.                                 iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // Процент выполнения
  50.  
  51.                             // Выводим текущее положение и прогресс
  52.                             $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
  53.                             $(vPb).children('.elapsed').html('Осталось '+iDays+' дн. '+iHours+' ч. '+iMin+' мин.:'+iSec+' сек.</b>');
  54.                             $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
  55.  
  56.                             // В случае завершения
  57.                             if (iPerc >= 100) {
  58.                                 clearInterval(vInterval);
  59.                                 $(vPb).children('.percent').html('<b>100%</b>');
  60.                                 $(vPb).children('.elapsed').html('Завершено');
  61.  
  62.                                                             setTimeout(
  63.                                                             function() {
  64.                                                                     location.reload();
  65.                                                             }, 4000
  66.                                                     );
  67.  
  68.  
  69.                             }
  70.                         } ,aOpts.interval
  71.                     );
  72.                 }
  73.             );
  74.         }
  75.  
  76.         // Режим по умолчанию
  77.         $('#progress1').anim_progressbar();
  78.  
  79.         // Для секунд с 5-й по 15-ю
  80.         var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // Теперь прибавляем по 5 секунд
  81.         var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // Теперь прибавляем по 15 секунд
  82.         $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
  83.  
  84.         // Устанавливаем интервал обновления в 1 секунду
  85.         $('#progress3').anim_progressbar({interval: 1000});
  86.     });
  87.     </script>
  88.  
  89.  


И будем тыкать пока наугад, пока я значение finish не понимаю до конца
т.е. добавим смещение, куды вы там говорили:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.  
  3. var iLeftMs = aOpts.finish - new Date() + new Date().getTimezoneOffset() * 60 * 1000;
  4. var iElapsedMs = new Date() + new Date().getTimezoneOffset() * 60 * 1000 - aOpts.start
  5.  


и разумеется finish оставить прежним)
8. webog - 13 Сентября, 2015 - 16:55:01 - перейти к сообщению
Так же NaN.
Как бы упростить тыканье?


Нажмите для увеличения


Желтая полоса это пых. А вот текст это JS. Нужно как то победить серверное время и время пользователя. Может есть еще варианты?
Или варианты для прогрессбара.
9. zypikov - 13 Сентября, 2015 - 18:58:46 - перейти к сообщению
Вы невнимательны. Я просил посмотреть значение (еще в первом варианте, когда смещение прибавляется только к значению finish):
CODE (javascript):
скопировать код в буфер обмена
  1.  //выведите в консольку значение finish и значение скажите
  2.                     console.info(aOpts.finish)

(Добавление)
Возможно там надо сначала:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var sm = new Date().getTimezoneOffset() * 60 * 1000;
  3.       finish: new Date(<?php echo $datat; ?>) + sm;
  4.  


У вас на изображении одни график, а в скрипте вроде как 3 инициализуются?
10. webog - 13 Сентября, 2015 - 19:02:53 - перейти к сообщению
zypikov, скрипт вставил из первого поста.


Нажмите для увеличения

(Добавление)
webog пишет:
У вас на изображении одни график, а в скрипте вроде как 3 инициализуются?


Использую только это <div id="progress1">
11. zypikov - 13 Сентября, 2015 - 19:54:29 - перейти к сообщению
Ой как я протормозил((
Я чет думал, что new Date возращает время в миллисекундах, а это форматированная дата. Конечно результат nan будет

$datat - это время в миллисекундах с сервака приходит?
Если да, то
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. finish: new Date(<?php echo $datat; ?>+ new Date().getTimezoneOffset() * 60 * 1000);
  3.  
  4.  
12. webog - 13 Сентября, 2015 - 22:54:11 - перейти к сообщению
zypikov пишет:
$datat - это время в миллисекундах с сервака приходит?


Это берется с базы. Пишется в базу так (старт и финиш):

PHP:
скопировать код в буфер обмена
  1. $ddel = time() + 60*60*24;
  2. $dadd = time();


Позже добавлю на пых определение часового пояса. Я пробовал писать + 3 часа, все нормально. Вот не верно было Осталось N часов, за которое отвечает JS.

Проверил! Выводит осталось 124 дня... Если убрать * 1000 , то 20 часов, вместо 24-х
(Добавление)
Если убрать * 60 * 1000, то выводит 24 часа 59 минут как и нужно.

В чем суть. Есть два времени старт и финиш. Финиш + 24 часа. Хранятся в базе.

Серверное время - время по МСК (Московское)

Для пользователей с урала скрипт работает не верно )

Писать в базу можно узнав часовой пояс и прибавить кол-во часов. Хранится в базе в UNIX (Пример: 1442174033). Это PHP

Как вот быть с JS ? Спасибо!
13. webog - 16 Сентября, 2015 - 15:15:25 - перейти к сообщению
I need help!

P.S. Отблагодарю за решение верное!
14. webog - 28 Сентября, 2015 - 12:17:00 - перейти к сообщению
Подыму тему.
15. zypikov - 29 Сентября, 2015 - 15:29:33 - перейти к сообщению
Вы еще не разобрались?
Пых функция time() возвращает время с сервера в секундах! А объект Date javascript принимает на вход время в UNIX - формате в микросекундах, т.е. еще $datat нужно умножить на 1000)))

 

Powered by ExBB FM 1.0 RC1