Countdown w JavaScripcie ze zmiennymi z PHP.

Question

Witam serdecznie. Mam bardzo wielką prośbę. :-)
Nie będę ściemniał. Jestem w trakcie tworzenia gry przeglądarkowej [RPG via www].
Od kilku ostatnich miesięcy, męczę się z jedną cholerną funkcją.

Co chcę zrobić?
Chcę wysłać postać na tak zwaną wyprawę. Wyprawa trwa [x] minut.
Na stronie wyświetlałby się Timer odliczający do końca wyprawy. No, chyba że, np. ktoś by ją zakończył wcześniej.
( opcjonalnie: chciałbym dodać animowany progressbar pokazujący postęp z aktualnej wyprawy, ale to tylko bajerek, więc nie musi być)

Teraz tak... do bazy danych lądują dwie wartości. [kiedy zaczął] oraz [kiedy skończy] wyprawę.
Dla pierwszej wartości przypisuję obecny czas, np:
 

<?php
//start misji
$start = time();
?>

dzięki tej funkcji dostaniemy aktualny czas w sekundach. Uważam ten rodzaj podawania czasu za dobry, ponieważ łatwo jest mając taki uchwyt, stworzyć inną datę, np [kiedy skończy].
 

<?php
// Kiedy skończy...
$koniec = $start + ( 10*60 );
// koniec = aktualny czas + 10razy 60 sekund
?>

Jeżeli teraz od zmiennej $koniec odejmę zawartość zmiennej $start, otrzymamy ilość sekud która została do końca wyprawy.
Mam tutaj teraz Timer w JS, trochę już przerobiony i chciałbym jego dwóm zmiennym [var end = ...] oraz [var now = ...] przpisać te zmienne z PHP które stworzyłem. Te zmienne będą wynikiem z zapytania do MySql, gdzie podane będzie [kiedy zaczął] oraz [kiedy skończy].
 

<script>
var end = new Date('02/19/2016 10:1 AM');

    var sekundy = 1000;
    var minuty = sekundy * 60;
    var godziny = minuty * 60;
    var dni = godziny * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / dni);
        var hours = Math.floor((distance % dni) / godziny);
        var minutes = Math.floor((distance % godziny) / minuty);
        var seconds = Math.floor((distance % minuty) / sekundy);

        document.getElementById('countdown').innerHTML = days +' : '+ hours +' : '+ minutes +' : '+ seconds;
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div style="font-size: 36px; color: #f00;" id="countdown"></div>

Za kupę kasy kupiłem sobie książki do nauki PHP i MySQL. W jednej z nich napisane jest parę przykładów jak wpisywać i wyciągać datę z Bazy, ale z niczym się mają do tego co ja potrzebuję. Nie wiem jak np używając formatu ISO 8601 czyli mając np taki wpis [2015-12-15T12:00:30+11:00], mógłbym w jakikolwiek sposób, dodać czy odejmować minuty.
Męczę się z tym od długich miesięcy, na Ajaxie nie znam się w ogóle, przerabiam setki skryptów, obejrzałem z tysiąc filmików jak zrobić Timer'a ale żaden nie był choć troszkę pomocny, do tego czego potrzebowałem.
Teraz, jeśli będzie taka potrzeba, to jestem w stanie nawet zapłacić, za ... nie za gotowca, a za szczegółowe wyjaśnienie jak takie operacje na czasie i dacie powinny wyglądać.

Bardzo proszę o w miarę szybką odpowiedź. Już jestem łysy, bo z nerwów wyrwałem sobie wszystkie kudły.
Pozdrawiam bardzo serdecznie :-)

Answer 1

Czyli mam rozumieć, że chodzi o wyciągnięcie daty z czasem startu i daty z czasem końca i na tej podstawie zrobienia timera odliczającego czas wyprawy?

Comments

Nie czas wyprawy, tylko czas do końca wyprawy

---

Jeśli w PHP to klasa DateTime   ( zapraszam do manuala) ,  lub lib Carbon. 

Dodatkowo musisz wiedzieć jak działa http, wtedy zrozumiesz ze musisz sobie jakies api zrobić dla gry i odbierać "ajaxem". https://symfony.com/doc/current/book/http_fundamentals.html

Answer 2

Makar(ony)ena w kodzie, w zasadzie nie powinno się tak robić, ale skoro musisz:

<?php
	echo '<script>var timeEnd = ', time() + $czas_wyprawy_w_sekundach_ofc, ';</script'>;
?>

<script>
	var yourInterval = setInterval(function() {
		var dif = timeEnd - Math.floor(Date.now() / 1000); //ilosc sekund, jaka pozostala do konca

		if(dif <= 0) {
			clearInterval(yourInterval);
			//tu robisz cokolwiek, jak skonczy sie wyprawa
		}
		else {
			//tu robisz cokolwiek, jesli wyprawa trwa
		}
	}, 1000);
</script>

 

Comments

<?=  "<script>var timeEnd = ". time() + $czas_wyprawy_w_sekundach_ofc . "</script>" ?>

Ale nie, nie róbmy tak, 2015 przecież ;)

---

No jak to tak? Przecież się tak nie da! Jak do zmiennej timeEnd możesz dać time(), skoro time() to aktualny czas?
Koniec nigdy nie bedzie miał miejsca?

---

@efik ok, wybacz :(

@reCAPTCHA_hater do zmiennej timeEnd dajesz aktualny czas + dlugosc wyprawy wyrazona w sekundach :)

Answer 3

Myślałem bardziej o czymś takim:
 

<script>
var end = '<?php // Kiedy koniec pobrane z MySql ?>';

    var sekundy = 1000;
    var minuty = sekundy * 60;
    var godziny = minuty * 60;
    var dni = godziny * 24;
    var timer;

    function showRemaining() {
        var now = '<?php // aktualny czas, czyli time(); ?>';
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / dni);
        var hours = Math.floor((distance % dni) / godziny);
        var minutes = Math.floor((distance % godziny) / minuty);
        var seconds = Math.floor((distance % minuty) / sekundy);

        document.getElementById('countdown').innerHTML = days +' : '+ hours +' : '+ minutes +' : '+ seconds;
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div style="font-size: 36px; color: #f00;" id="countdown"></div>