Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ JavaScript _ Problemy z odliczaniem do wydarzenia

Napisany przez: Qatadah 5.11.2017, 12:32:31

Cześć Jestem nowicjuszem i potrzebuję pomocy z kodem ale i radę. Chodzi o odliczanie do wydarzenia.

Jak obliczać czas od daty serwera a nie lokalnej? ale tu proszę też o pomoc w zrozumieniu, czy to ma sens? bo kto zmienia datę systemową?, poza tym dojdą kolejne linijki kodu gdy mamy różnice w czasie co na razie jest już czarną magią dla mnie

Jak dodać kilka wydarzeń (różnych odliczań) na jednej stronie z jednego kodu

Mój kod na teraz wygląda tak
JavaScript

[HTML] pobierz, plaintext 
  1. var countDownDateTime = new Date("2017-11-12 12:00:00").getTime();
  2.  
  3. var myInterval = setInterval(function () { "use strict";
  4.  
  5.     var currentDateTime = new Date().getTime();
  6.  
  7.     var diff = countDownDateTime - currentDateTime;
  8.  
  9.     var days = Math.floor(diff / (1000 * 60 * 60 * 24));	
  10.     var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  11.     var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  12.     var seconds = Math.floor((diff % (1000 * 60)) / 1000);
  13. 	if (days<10) {days = '0' + days;}
  14. 	if (hours<10) {hours ='0' + hours;}
  15. 	if (minutes<10) {minutes ='0' + minutes;}
  16. 	if (seconds<10) {seconds ='0' + seconds;}
  17.  
  18.     document.getElementById("days").innerHTML = days;
  19.     document.getElementById("hours").innerHTML = hours;
  20.     document.getElementById("minutes").innerHTML = minutes;
  21.     document.getElementById("seconds").innerHTML = seconds;
  22.  
  23.     if (diff < 0) {
  24.         clearInterval(myInterval); 	
  25. 		var elem = document.getElementById("clear");
  26.         elem.parentNode.removeChild(elem);	
  27. 	}
  28. }, 1000); 
[HTML] pobierz, plaintext


Kod Html
[HTML] pobierz, plaintext 
  1.  <http://december.com/html/4/element/ul.html id="clear">
  2. 	    <http://december.com/html/4/element/li.html><http://december.com/html/4/element/span.html id="days"></http://december.com/html/4/element/span.html>Dni</http://december.com/html/4/element/li.html>
  3.             <http://december.com/html/4/element/li.html><http://december.com/html/4/element/span.html id="hours"></http://december.com/html/4/element/span.html>Godzin</http://december.com/html/4/element/li.html>
  4.             <http://december.com/html/4/element/li.html><http://december.com/html/4/element/span.html id="minutes"></http://december.com/html/4/element/span.html>Minut</http://december.com/html/4/element/li.html>
  5.             <http://december.com/html/4/element/li.html><http://december.com/html/4/element/span.html id="seconds"></http://december.com/html/4/element/span.html>Sekund</http://december.com/html/4/element/li.html>
  6.     </http://december.com/html/4/element/ul.html>
[HTML] pobierz, plaintext


Napisany przez: viking 5.11.2017, 13:02:34

https://prophp.pl/advice/show/4/w_jaki_sposob_przekazywac_czas_pomiedzy_php_i_js%3F
https://prophp.pl/article/28/propagacja_i_delegacja_zdarzen_w_javascript

Ma to sens bo weź pod uwagę różne strefy czasowe użytkowników.

Napisany przez: Qatadah 5.11.2017, 15:31:24

Dobrze wszystko jest zrozumiałe ale przeglądam kody w necie "countdown timer php" Jak pobrać w tym moim kodzie czas z serwera wszędzie gdzie nie wejdę jest tylko javascript albo jquery nie ma jak użyć czasu z serwera. Jak próbowałem to ogarnąć tak: ale jak tu funkcję dołożyć by czas się na stronie na bieżąco się odświeżał odświeżał

[HTML] pobierz, plaintext 
  1. <?php
  2.  
  3. $date = strtotime("2019-12-05 12:00:00");
  4. $remaining = $date - time();
  5.  
  6. $days = floor ($remaining / 86400);
  7. $hours = floor (($remaining % 86400) / 3600);
  8. $min = floor (($remaining % 3600) / 60);
  9. $sec = floor ($remaining % 60);
  10. ?>
  11.  
  12. <http://december.com/html/4/element/body.html>
  13. <http://december.com/html/4/element/div.html id="container">
  14.   <http://december.com/html/4/element/div.html class="m"> <http://december.com/html/4/element/span.html><?php echo $days; ?></http://december.com/html/4/element/span.html>Dni</http://december.com/html/4/element/div.html>
  15.   <http://december.com/html/4/element/div.html class="m"> <http://december.com/html/4/element/span.html><?php echo $hours; ?></http://december.com/html/4/element/span.html>Godzin</http://december.com/html/4/element/div.html>
  16.   <http://december.com/html/4/element/div.html class="m"> <http://december.com/html/4/element/span.html><?php echo $min; ?></http://december.com/html/4/element/span.html>Minut</http://december.com/html/4/element/div.html>
  17.   <http://december.com/html/4/element/div.html class="m"> <http://december.com/html/4/element/span.html><?php echo $sec; ?></http://december.com/html/4/element/span.html>Sekund</http://december.com/html/4/element/div.html>  
  18. </http://december.com/html/4/element/div.html>
  19.  
  20. </http://december.com/html/4/element/body.html>
[HTML] pobierz, plaintext

Napisany przez: viking 5.11.2017, 16:00:56

Musiałbyś stronę co sekundę przeładować co oczywiście nie ma sensu. Dynamiczne odświeżanie robi się w js. Wystarczy pobrać czas raz po załadowaniu i na nim operować.

Napisany przez: Qatadah 9.11.2017, 00:12:17

Cześć mógłbym prosić o poprawę tego kodu, nie mam pojęcia dlaczego to nie działa, w zamyślę ma to być multi odliczanie czyli w HTMLU dopiero podaję datę i godzinę. Najlepsze jest to że kod działa jsfiddle.net na tej samej bibliotece jQuery co u mnie najnowszej 3.2.1. Co jest u mnie nie tak? Linki do plików mam poprawne no po prostu nie wiem sad.gif
HTML

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html src="jquery-3.2.1.min.js"></http://december.com/html/4/element/script.html>
  2. <http://december.com/html/4/element/script.html type="text/javascript" src="js/Timer.js"></http://december.com/html/4/element/script.html>	
  3. </http://december.com/html/4/element/head.html>
  4.  
  5. <http://december.com/html/4/element/body.html>
  6. <http://december.com/html/4/element/div.html data-countdown="2019/01/01">
  7.  
  8.   <http://december.com/html/4/element/div.html class="days"><http://december.com/html/4/element/span.html>dni</http://december.com/html/4/element/span.html></http://december.com/html/4/element/div.html>
  9.  
  10.   <http://december.com/html/4/element/div.html class="hours"><http://december.com/html/4/element/span.html>godzin</http://december.com/html/4/element/span.html></http://december.com/html/4/element/div.html>
  11.  
  12.   <http://december.com/html/4/element/div.html class="minutes"><http://december.com/html/4/element/span.html>minut</http://december.com/html/4/element/span.html></http://december.com/html/4/element/div.html>
  13.  
  14.   <http://december.com/html/4/element/div.html class="seconds"><http://december.com/html/4/element/span.html>sekund</http://december.com/html/4/element/span.html></http://december.com/html/4/element/div.html>
  15.  
  16. </http://december.com/html/4/element/div.html>
[HTML] pobierz, plaintext


timer.js
[JAVASCRIPT] pobierz, plaintext 
  1. $('[data-countdown]').each(function() { "use strict" ;
  2.   var $this = $(this), finalDate = $(this).data('countdown');
  3.   $this.countdown(finalDate, function(event) { 
  4.         $(".days").text(event.strftime("%-d"));
  5.         $(".hours").text(event.strftime("%H"));
  6.         $(".minutes").text(event.strftime("%M"));
  7.         $(".seconds").text(event.strftime("%S"));
  8.       });
  9. });
[JAVASCRIPT] pobierz, plaintext



Napisany przez: 8_pasarzer_NOSTROMO 25.03.2019, 13:47:13

Również podepnę się pod wątek by nie robić nowego. Chciałbym aby skrypt wyświetlał na żywo ile czasu w godz, min, sec jest od zaznaczonej daty. Jeszcze bardziej jakby wybraną datę można było pobrać z bazy danych i od niej liczył ile czasu mineło. Bez podawania dni. Same godziny, min, sec. ktoś pomoże ?

$data = "2019-03-25 15:00:00";


[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2. var countDownDate = new Date("2019-03-25 15:00:00").getTime();
  3.  
  4. var x = setInterval(function() {
  5.  
  6.   var now = new Date().getTime();
  7.  
  8.   var distance = countDownDate - now;
  9.  
  10.   var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  11.   var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  12.   var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  13.   var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  14.  
  15.   document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  16.   + minutes + "m " + seconds + "s ";
  17.  
  18. }, 1000);
  19. </http://december.com/html/4/element/script.html>
  20.  
  21. <http://december.com/html/4/element/p.html id="demo"></http://december.com/html/4/element/p.html>
  22.  
[HTML] pobierz, plaintext

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)