Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
Reply to this topicStart new topic
> [JavaScript][PHP] Różnica w odmierzaniu czasu, jak znowelować lub zsynchronizować
shpaque
post 20.05.2020, 13:23:18
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


witam serdecznie, napisałem coś na szybko:
  1. <p id="php"></p>
  2. <p id="js"></p>
  3.  
  4. var jsTime = new Date();
  5. var phpTime = new Date("<?php echo date('c'); ?>");
  6. document.getElementById("php").innerHTML = 'Czas z serwera PHP: ' + phpTime;
  7. document.getElementById("js").innerHTML = 'Czas przeglądarki (JS): ' + jsTime;


jest to sfiddlowane tu: https://www.tehplayground.com/CkYfUInJPBESsPjc

generalnie u mnie w obecnym momencie pokazuje ze czas z serwera jest ok 13 sekund opozniony wzgledem przegladarki. Pytanie - czy daj się (i jak) to zniwelować a najlepiej zrobić jakiś button ze skryptem, który zaktualizuje czas w przeglądarce / systemie względem czasu PHP..?
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 13:25:30
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Ale po co synchronizować? Bazuj wyłącznie na czasie pobranym z serwera.


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 13:26:04
Post #3





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


nie da się - co zrobić w przypadku countera w js na przyklad..? ktory musi na wszystkich urzadzeniach i przegladarkach odmierzac ten sam czas co do sekundy..? pomyslalem zeby uzytkownik mogl sobie sprawdzic jaki ma rozjazd i zsynchronizowac przyciskiem zeby sam nie musial w systemie edytowac czasu...

Ten post edytował shpaque 20.05.2020, 13:27:07
Go to the top of the page
+Quote Post
viking
post 20.05.2020, 13:27:10
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----


Czas z serwera PHP: Wed May 20 2020 14:26:06 GMT+0200 (czas środkowoeuropejski letni)

Czas przeglądarki (JS): Wed May 20 2020 14:26:06 GMT+0200 (czas środkowoeuropejski letni)

Na wolny komputer nic nie poradzisz.


--------------------
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 13:31:57
Post #5





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Co chcesz osiągnąć, zapewnić równą sekundę na wszystkich urządzeniach czy równą godzinę startową?


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 13:35:09
Post #6





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


no u mnie jest tak:

Czas z serwera PHP: Wed May 20 2020 14:32:03 GMT+0200 (czas środkowoeuropejski letni)

Czas przeglądarki (JS): Wed May 20 2020 14:32:15 GMT+0200 (czas środkowoeuropejski letni)

niestety w wiekszosci przypadkow w windowsie jest tak samo - na maku nie mam zadnego problemu bo generalnie czas jest synchronizowany, ale przeciez Microsoft w ogole zrezygnowal z automatycznej sunchronizacji czasu bodajze windows 7 juz nie mial tej opcji a jak mial to nie ma wspieranego serwera smile.gif nie wiem - malo siedze w okienkach, w kazdym razie potrzebuje zlotego srodka najlepiej opcji zeby moc z poziomyu strony www przestawiuc zegar systemowy


Cytat(trueblue @ 20.05.2020, 14:31:57 ) *
Co chcesz osiągnąć, zapewnić równą sekundę na wszystkich urządzeniach czy równą godzinę startową?


wystarczy zeby przy przeladowaniu byla rowna - jako startowa, tak mysle - czyli przy uruchomieniu skryptu js z counterem (a nie w jego petli)
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 14:08:10
Post #7





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Cytat(shpaque @ 20.05.2020, 14:35:09 ) *
wystarczy zeby przy przeladowaniu byla rowna - jako startowa, tak mysle - czyli przy uruchomieniu skryptu js z counterem (a nie w jego petli)

No to jeszcze raz zasugeruję Ci, abyś pobrał ją z serwera. Tak jak zrobiłeś to w linii 6.


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 14:28:13
Post #8





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


ok to teraz jak to zrobic kiedy skrypt korzysta z "jquery final countdown" i nie ma tam opcji wstawienia todaya
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 14:41:46
Post #9





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Nie ma opcji wstawienia daty? To od jakiej odlicza?
Najlepiej gdybyś pokazał źródło tego skryptu, bo tych "final countdown" pewnie jest multum.


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 15:03:44
Post #10





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


w zwyklym skrypcie zrobilem to tak:

  1. ...
  2. var serverTime = new Date("<?php echo date('c'); ?>");
  3. var systemTime = new Date();
  4. var difference = systemTime - serverTime;
  5.  
  6. var x = setInterval(function() {
  7. var now = Date.now() - difference;
  8. ...


i chyba jest ok a z api...


  1. (function(factory) {
  2. "use strict";
  3. if (typeof define === "function" && define.amd) {
  4. define([ "jquery" ], factory);
  5. } else {
  6. factory(jQuery);
  7. }
  8. })(function($) {
  9. "use strict";
  10. var instances = [], matchers = [], defaultOptions = {
  11. precision: 100,
  12. elapse: false,
  13. defer: false
  14. };
  15. matchers.push(/^[0-9]*$/.source);
  16. matchers.push(/([0-9]{1,2}\/){2}[0-9]{4}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
  17. matchers.push(/[0-9]{4}([\/\-][0-9]{1,2}){2}( [0-9]{1,2}(:[0-9]{2}){2})?/.source);
  18. matchers = new RegExp(matchers.join("|"));
  19. function parseDateString(dateString) {
  20. if (dateString instanceof Date) {
  21. return dateString;
  22. }
  23. if (String(dateString).match(matchers)) {
  24. if (String(dateString).match(/^[0-9]*$/)) {
  25. dateString = Number(dateString);
  26. }
  27. if (String(dateString).match(/\-/)) {
  28. dateString = String(dateString).replace(/\-/g, "/");
  29. }
  30. return new Date(dateString);
  31. } else {
  32. throw new Error("Couldn't cast `" + dateString + "` to a date object.");
  33. }
  34. }
  35. var DIRECTIVE_KEY_MAP = {
  36. Y: "years",
  37. m: "months",
  38. n: "daysToMonth",
  39. d: "daysToWeek",
  40. w: "weeks",
  41. W: "weeksToMonth",
  42. H: "hours",
  43. M: "minutes",
  44. S: "seconds",
  45. D: "totalDays",
  46. I: "totalHours",
  47. N: "totalMinutes",
  48. T: "totalSeconds"
  49. };
  50. function escapedRegExp(str) {
  51. var sanitize = str.toString().replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
  52. return new RegExp(sanitize);
  53. }
  54. function strftime(offsetObject) {
  55. return function(format) {
  56. var directives = format.match(/%(-|!)?[A-Z]{1}(:[^;]+;)?/gi);
  57. if (directives) {
  58. for (var i = 0, len = directives.length; i < len; ++i) {
  59. var directive = directives[i].match(/%(-|!)?([a-zA-Z]{1})(:[^;]+;)?/), regexp = escapedRegExp(directive[0]), modifier = directive[1] || "", plural = directive[3] || "", value = null;
  60. directive = directive[2];
  61. if (DIRECTIVE_KEY_MAP.hasOwnProperty(directive)) {
  62. value = DIRECTIVE_KEY_MAP[directive];
  63. value = Number(offsetObject[value]);
  64. }
  65. if (value !== null) {
  66. if (modifier === "!") {
  67. value = pluralize(plural, value);
  68. }
  69. if (modifier === "") {
  70. if (value < 10) {
  71. value = "0" + value.toString();
  72. }
  73. }
  74. format = format.replace(regexp, value.toString());
  75. }
  76. }
  77. }
  78. format = format.replace(/%%/, "%");
  79. return format;
  80. };
  81. }
  82. function pluralize(format, count) {
  83. var plural = "s", singular = "";
  84. if (format) {
  85. format = format.replace(/(:|;|\s)/gi, "").split(/\,/);
  86. if (format.length === 1) {
  87. plural = format[0];
  88. } else {
  89. singular = format[0];
  90. plural = format[1];
  91. }
  92. }
  93. if (Math.abs(count) > 1) {
  94. return plural;
  95. } else {
  96. return singular;
  97. }
  98. }
  99. var Countdown = function(el, finalDate, options) {
  100. this.el = el;
  101. this.$el = $(el);
  102. this.interval = null;
  103. this.offset = {};
  104. this.options = $.extend({}, defaultOptions);
  105. this.instanceNumber = instances.length;
  106. instances.push(this);
  107. this.$el.data("countdown-instance", this.instanceNumber);
  108. if (options) {
  109. if (typeof options === "function") {
  110. this.$el.on("update.countdown", options);
  111. this.$el.on("stoped.countdown", options);
  112. this.$el.on("finish.countdown", options);
  113. } else {
  114. this.options = $.extend({}, defaultOptions, options);
  115. }
  116. }
  117. this.setFinalDate(finalDate);
  118. if (this.options.defer === false) {
  119. this.start();
  120. }
  121. };
  122. $.extend(Countdown.prototype, {
  123. start: function() {
  124. if (this.interval !== null) {
  125. clearInterval(this.interval);
  126. }
  127. var self = this;
  128. this.update();
  129. this.interval = setInterval(function() {
  130. self.update.call(self);
  131. }, this.options.precision);
  132. },
  133. stop: function() {
  134. clearInterval(this.interval);
  135. this.interval = null;
  136. this.dispatchEvent("stoped");
  137. },
  138. toggle: function() {
  139. if (this.interval) {
  140. this.stop();
  141. } else {
  142. this.start();
  143. }
  144. },
  145. pause: function() {
  146. this.stop();
  147. },
  148. resume: function() {
  149. this.start();
  150. },
  151. remove: function() {
  152. this.stop.call(this);
  153. instances[this.instanceNumber] = null;
  154. delete this.$el.data().countdownInstance;
  155. },
  156. setFinalDate: function(value) {
  157. this.finalDate = parseDateString(value);
  158. },
  159. update: function() {
  160. if (this.$el.closest("html").length === 0) {
  161. this.remove();
  162. return;
  163. }
  164. var hasEventsAttached = $._data(this.el, "events") !== undefined, now = new Date(), newTotalSecsLeft;
  165. newTotalSecsLeft = this.finalDate.getTime() - now.getTime();
  166. newTotalSecsLeft = Math.ceil(newTotalSecsLeft / 1e3);
  167. newTotalSecsLeft = !this.options.elapse && newTotalSecsLeft < 0 ? 0 : Math.abs(newTotalSecsLeft);
  168. if (this.totalSecsLeft === newTotalSecsLeft || !hasEventsAttached) {
  169. return;
  170. } else {
  171. this.totalSecsLeft = newTotalSecsLeft;
  172. }
  173. this.elapsed = now >= this.finalDate;
  174. this.offset = {
  175. seconds: this.totalSecsLeft % 60,
  176. minutes: Math.floor(this.totalSecsLeft / 60) % 60,
  177. hours: Math.floor(this.totalSecsLeft / 60 / 60) % 24,
  178. days: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,
  179. daysToWeek: Math.floor(this.totalSecsLeft / 60 / 60 / 24) % 7,
  180. daysToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 % 30.4368),
  181. weeks: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7),
  182. weeksToMonth: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 7) % 4,
  183. months: Math.floor(this.totalSecsLeft / 60 / 60 / 24 / 30.4368),
  184. years: Math.abs(this.finalDate.getFullYear() - now.getFullYear()),
  185. totalDays: Math.floor(this.totalSecsLeft / 60 / 60 / 24),
  186. totalHours: Math.floor(this.totalSecsLeft / 60 / 60),
  187. totalMinutes: Math.floor(this.totalSecsLeft / 60),
  188. totalSeconds: this.totalSecsLeft
  189. };
  190. if (!this.options.elapse && this.totalSecsLeft === 0) {
  191. this.stop();
  192. this.dispatchEvent("finish");
  193. } else {
  194. this.dispatchEvent("update");
  195. }
  196. },
  197. dispatchEvent: function(eventName) {
  198. var event = $.Event(eventName + ".countdown");
  199. event.finalDate = this.finalDate;
  200. event.elapsed = this.elapsed;
  201. event.offset = $.extend({}, this.offset);
  202. event.strftime = strftime(this.offset);
  203. this.$el.trigger(event);
  204. }
  205. });
  206. $.fn.countdown = function() {
  207. var argumentsArray = Array.prototype.slice.call(arguments, 0);
  208. return this.each(function() {
  209. var instanceNumber = $(this).data("countdown-instance");
  210. if (instanceNumber !== undefined) {
  211. var instance = instances[instanceNumber], method = argumentsArray[0];
  212. if (Countdown.prototype.hasOwnProperty(method)) {
  213. instance[method].apply(instance, argumentsArray.slice(1));
  214. } else if (String(method).match(/^[$A-Z_][0-9A-Z_$]*$/i) === null) {
  215. instance.setFinalDate.call(instance, method);
  216. instance.start();
  217. } else {
  218. $.error("Method %s does not exist on jQuery.countdown".replace(/\%s/gi, method));
  219. }
  220. } else {
  221. new Countdown(this, argumentsArray[0], argumentsArray[1]);
  222. }
  223. });
  224. };
  225. });
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 15:40:04
Post #11





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Przecież jest nawet przykład: http://hilios.github.io/jQuery.countdown/


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 19:54:49
Post #12





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


Cytat(trueblue @ 20.05.2020, 16:40:04 ) *
Przecież jest nawet przykład: http://hilios.github.io/jQuery.countdown/


no tak ale to przyklad podmiany daty DO ktorej ma odliczac a nie startowej, czyli "now"... u mnie to tak wyglada:

  1. <script type="text/javascript">
  2. nextTimeStart = <?php echo isset($nextTest['timeStart']) ? 'new Date("'.date('c', strtotime($nextTest['timeStart'])).'")' : '\'\''; ?>;
  3. currentTimeEnd = <?php echo isset($currentTest['timeEnd']) ? 'new Date("'.date('c', strtotime($currentTest['timeEnd'])).'")' : '\'\''; ?>;
  4. getTest = "<?php echo isset($getTest) ? $getTest : ''; ?>";
  5. getUser = "<?php echo isset($getUser) ? $getUser : ''; ?>";
  6. getInTime = "<?php echo isset($getInTime) ? $getInTime : ''; ?>";
  7.  
  8. if (currentTimeEnd !== '') {countDownTime = currentTimeEnd;}
  9. else {countDownTime = nextTimeStart;}
  10.  
  11. if (nextTimeStart !== '' || currentTimeEnd !== '') {
  12. $('#days, #hours, #minutes, #seconds').countdown(countDownTime, {precision: 100})
  13. .on('update.countdown', function(event) {
  14. if (event.offset.totalHours < 24) {$('#days, #days-th').css('display', 'none');} else {$('#days').html(event.strftime('%D'));}
  15. if (event.offset.totalMinutes < 60) {$('#hours, #hours-th').css('display', 'none');} else {$('#hours').html(event.strftime('%H'));}
  16. $('#minutes').html(event.strftime('%M'));
  17. $('#seconds').html(event.strftime('%S'));
  18. ...


szkoda, ze w tym api nie pomyslal gosciu zeby mozna bylo podmienic "now", wiec chyba jedna trzeba wrocic do mojego standardowego licznika js, ktorego mam zrobionego np w adminie u siebie i gdzie wydaje mi sie pokonalem roznice w czasie..:

  1. function showTimeToEvent(timeToEvent, id) {
  2. var countDownTime = new Date(timeToEvent);
  3.  
  4. var serverTime = new Date("<?php echo date('c'); ?>");
  5. var systemTime = new Date();
  6. var difference = systemTime - serverTime;
  7.  
  8. var x = setInterval(function() {
  9. var now = Date.now() - difference;
  10. var distance = countDownTime - now;
  11. var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  12. var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  13. var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  14. var seconds = Math.floor((distance % (1000 * 60)) / 1000, 2);
  15.  
  16. var content = '<strong>' + days + 'd, ' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '</strong>';
  17.  
  18. if (days < 1) {content = '<strong>' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '</strong>';}
  19. if (days < 1 && hours < 1 && minutes < 1) {document.getElementById(id).style = 'color: var(--rose);';}
  20.  
  21. if (distance < 0) {
  22. clearInterval(x);
  23. content = '<strong style="cursor: pointer;" onclick="location.reload(true);">ODŚWIEŻ</strong>';
  24. }
  25. document.getElementById(id).innerHTML = content;
  26. }, 100);
  27. }
Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 20:00:16
Post #13





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zarzyj w kod tego pluginu. Jest tam ustawianie daty startowej właśnie jako new Date() (zmienna now).
Wystarczy, że dodasz metodę setStartDate i będziesz wartość przekazywał w wywołaniu.


--------------------
Go to the top of the page
+Quote Post
shpaque
post 20.05.2020, 20:31:03
Post #14





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


w sumie racja...

Cytat(trueblue @ 20.05.2020, 21:00:16 ) *
Zarzyj w kod tego pluginu. Jest tam ustawianie daty startowej właśnie jako new Date() (zmienna now).
Wystarczy, że dodasz metodę setStartDate i będziesz wartość przekazywał w wywołaniu.


to moze mi troche pomozesz, rozumiem ze chodzi o ten wycinek

  1. var hasEventsAttached = $._data(this.el, "events") !== undefined, now = new Date(), newTotalSecsLeft;
  2. newTotalSecsLeft = this.finalDate.getTime() - now.getTime();

Go to the top of the page
+Quote Post
trueblue
post 20.05.2020, 20:41:19
Post #15





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tu: https://github.com/hilios/jQuery.countdown/...ry.countdown.js lepiej widać.

Tak, to ten fragment. Czyli zamiast now możesz zmienić na this.startDate. Potrzebna jest analogiczna funkcja do tej z linii 178, ale ustawiająca właśnie this.startDate.
Tam gdzie jest wywoływana setFinalDate, to i nowa setStartDate.
W linii 120 jako trzeci argument startDate, options jako czwarty.
W linii 244 dodatkowo argumentsArray[2], a w linii 236 slice(2).


--------------------
Go to the top of the page
+Quote Post
shpaque
post 23.05.2020, 21:17:31
Post #16





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


ok zrobilem to sobie juz, teraz mam zagwostke przy tym skrypcie - niby odmieza czas:

  1. <script type="text/javascript">
  2. function showTime(text, time, id) {
  3. var t = setInterval(function() {
  4. var updateDate = new Date(time);
  5. var hours = Math.floor((updateDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  6. var minutes = Math.floor((updateDate % (1000 * 60 * 60)) / (1000 * 60));
  7. var seconds = Math.floor((updateDate % (1000 * 60)) / 1000, 2);
  8. var miliseconds = Math.floor(updateDate);
  9.  
  10. var content = text + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '<br><small>(w ms: <strong>' + miliseconds + '</strong>)</small>';
  11.  
  12. document.getElementById(id).innerHTML = content;
  13. }, 1000);
  14. }
  15.  
  16. <div class="row align-self-center" style="margin-top: 15px;">
  17. <div class="col-md-4 text-center align-self-center">
  18. <p id="serverTime" data-toggle="tooltip" data-title="To czas bazowy (serwera), na podstawie którego działa aplikacja Test"><script>showTime('Czas <strong>serwera</strong>: ', '<?php echo date('c'); ?>', 'serverTime');</script></p>
  19. </div>
  20. <div class="col-md-4 text-center align-self-center">
  21. <p id="systemTime" data-toggle="tooltip" data-title="To wskazanie czasu Twojego systemu i przeglądarki. Jeśli różni się choćby o parę sekund – oznacza to, że Twoje urządzenie ma źle ustawiony zegar"><script>showTime('Czas <strong>Twojego systemu</strong>: ', new Date(), 'systemTime');</script></p>
  22. </div>
  23. <div class="col-md-4 text-center align-self-center">
  24. <p id="correctTime" data-toggle="tooltip" data-title="System automatycznie koryguje różnicę casu Twojego systemu (powinien wskazywać identyczny czas jak czas serwera) – dzięki temu możesz bezpiecznie wziąć udział w teście">
  25. var srvTime = new Date('<?php echo date('c'); ?>');
  26. var sysTime = new Date();
  27. var correction = sysTime - srvTime;
  28. var corTime = new Date(Date.now() - correction);
  29.  
  30. showTime('Czas <strong>po korekcie</strong>: ', corTime, 'correctTime');
  31.  
  32. if (correction > 5000 || correction < -5000) {
  33. document.getElementById('systemTime').innerHTML = document.getElementById('systemTime').innerHTML + '<br><big style="margin-top: 5px;"><red><strong>MASZ ŹLE USTAWIONY ZEGAR SYSTEMOWY!</strong></red></big>';
  34. }
  35. </script>
  36. </p>
  37. </div>
  38. </div>


i pokazuje oraz niweluje roznicę, ale w obecnym stanie:
- nie zmienia się co sekundę (nie "chodzi")
- jak zmienię "var updateDate = new Date(time);" na "var updateDate = new Date(Date(time));" to chodzi ale wszedzie pokazuje czas serwera,
- jak zmienię "var updateDate = new Date(time);" na "var updateDate = new Date.now(time); chodzi ale wszedzie pokazuje zegar systemowy

przyklad na maku przy skrypcie załączonym powyżej (zegar stoi ale po wejsciu na strone pokazuje aktualny czas pociagniety przy renderze strony):

  1. Czas serwera: 10:29:44
  2. (w ms: 1590229784000)
  3.  
  4. Czas Twojego systemu: 10:29:44
  5. (w ms: 1590229784735)
  6.  
  7. Czas po korekcie: 10:29:44
  8. (w ms: 1590229784000)


@EDIT

Już sobie poradziłem. W ten sposób:

  1. <script type="text/javascript">
  2. function showTime(text, time, id) {
  3. var newTime = new Date(time);
  4. var interval = 0;
  5.  
  6. var t = setInterval(function() {
  7. var updateDate = new Date(newTime.getTime() + interval);
  8. var hours = updateDate.getHours();
  9. var minutes = updateDate.getMinutes();
  10. var seconds = updateDate.getSeconds();
  11. var miliseconds = Math.floor(updateDate);
  12.  
  13. var content = text + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2) + '<br><small>(w ms: <strong>' + miliseconds + '</strong>)</small>';
  14. document.getElementById(id).innerHTML = content;
  15.  
  16. interval = interval + 1000;
  17. }, 1000);
  18. }
Go to the top of the page
+Quote Post
Tomplus
post 23.05.2020, 22:51:40
Post #17





Grupa: Zarejestrowani
Postów: 1 828
Pomógł: 225
Dołączył: 20.03.2005
Skąd: Będzin

Ostrzeżenie: (0%)
-----


Testowałeś przypadek gdy użytkownik będzie korzystał dłużej niż 1 minuta, 10 minut czy też godzina?
Może też będzie robił się rozstrzał. Zależy kogo i na jak długo się spodziewasz na stronie.

Bo może regularnie warto odświeżać datatime z serwerem.
Go to the top of the page
+Quote Post
shpaque
post 18.09.2020, 13:32:34
Post #18





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


testowalem 5 i 7 minut w jedna i w druga strone - ale tutaj bardzo ladnie korygowal czas i po korekcie zawsze jest idealnie z serwerem. Do tej pory każdy test trwał nie wiecej niz 30 min i teraz dziala to poki co idealnie

Cytat(Tomplus @ 23.05.2020, 23:51:40 ) *
Bo może regularnie warto odświeżać datatime z serwerem.


a jak to zrobić?
Go to the top of the page
+Quote Post
SmokAnalog
post 18.09.2020, 14:42:56
Post #19





Grupa: Zarejestrowani
Postów: 1 707
Pomógł: 266
Dołączył: 3.07.2012
Skąd: Poznań

Ostrzeżenie: (0%)
-----


Najprościej ustalić różnicę między czasem serwera i klienta:

[JAVASCRIPT] pobierz, plaintext
  1. const clientTime = new Date();
  2. const serverTime = new Date(<?= time() * 1000 ?>);
  3. const timeDifference = serverTime - clientTime;
  4.  
  5. function getTime() {
  6. return new Date(Date.now() + timeDifference);
  7. }
[JAVASCRIPT] pobierz, plaintext

Funkcja getTime() zwróci Ci czas zsynchronizowany z serwerowym, bo zna różnicę między nimi. Na samym setInterval() czy tam setTimeout() nie można polegać, bo nie ma gwarancji, że rzeczywiście wykona się po ustalonym czasie.

Ja używam takiego sposobu jak powyżej, a jeśli chcę do tego wyświetlać np. zegar w czasie rzeczywistym, to korzystam z takiej funkcji wewnątrz właśnie setInterval(). W tym przypadku już ewentualne rozbieżności czasowe dla setInterval() nas nie interesują, bo nawet gdy wykona się zbyt późno lub zbyt wcześnie, to zwrócony czas i tak jest prawidłowy. Jedyną zagwozdką jest wtedy, na ile ustawić licznik setInterval(). Ja ustawiałem na 1000 (co sekundę), bo aż tak mnie nie obchodziły ewentualne zgrzyty w postaci np. pokazywaniu tej samej wartości zegara przez dwa cykle (dwie sekundy) lub skoki o dwie sekundy w jednym cyklu. Ale jeśli zegar musi być bardzo realistyczny, to warto rozważyć mniejszą wartość w setInterval(), może nawet 100 milisekund.
Go to the top of the page
+Quote Post
shpaque
post 18.09.2020, 15:00:03
Post #20





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


no ja mam tam tak zrobione:

  1. var serverTime = new Date('<?php echo date('c'); ?>');
  2. var systemTime = new Date();
  3. var correction = systemTime - serverTime;
  4. var correctTime = new Date(Date.now() - correction);


czy to nie jest to samo..?
Go to the top of the page
+Quote Post

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 11:50