Odliczanie, czas pozostały do kilku wydarzeń

0

Cześć Mam mały problem a mianowicie potrzebuje zrobić zegar a właściwie odliczanie do kilku wydarzeń php w java script i to mi się udało, oczywiście posiłkowałem się gotowcami ale efekt oczekiwany mi się udał.

Mój problem polega na tym iż chce by daty poszczególnych wydarzeń były w odrębnym pliku php tak samo skrypt JS ale coś rozdzielenie tego mi nie wychodzi. Możecie spojrzeć i pomóc?

plik indwx.php

<script>
var count = new Date("<?php echo $date.load('terminarz.php');?>").getTime();
var count1 = new Date("<?php echo $date1.load('terminarz.php');?>").getTime();
var x = setInterval( function() { startTimer('demo',count); }, 1000 );
var x = setInterval( function() { startTimer('demo1',count1); }, 1000 );
function startTimer(id,countDownDate)
.....
</script>

<body>

<p id="demo"></p>
<p id="demo1"></p>

</body>

oraz plik **terminarz.php
**

</head>
	
<?php $date = date('M d, Y H:i:s', strtotime('7-3-2019 15:37:25')); ?>
<?php $date1 = date('M d, Y H:i:s', strtotime('8-3-2019 15:37:25')); ?>

<body>

</body>

Jeśli to wrzucę razem w jednym pliku czyli index.php ,śmiga aż miło nie umiem tylko tego porozdzielać najlepiej na 3 pliki osobno index.php, terminarz.php gdzie będą daty jak wyżej oraz skrypt JS

0

Zastosuj instrukcję include oraz

<script src="name_file.js"></script>

.

0

Właśnie próbowałem ale nie działa zrobiłem coś takiego

index.php

<script src="countdowntimer.js"></script>
</head>

  <?php include('terminarz.php') ?>	
	
<body>	
<div id="demo">
  <h2>demo</h2>
  <p class="days"></p>
  <p class="hours"></p>
  <p class="minutes"></p>
  <p class="seconds"></p>
</div>
<div id="demo1">
  <h2>demo1</h2>
  <p class="days"></p>
  <p class="hours"></p>
  <p class="minutes"></p>
  <p class="seconds"></p>
</div>		
</body>

countdowntimer.js

var count = new Date("<?php echo $date;?>").getTime();
var count1 = new Date("<?php echo $date1;?>").getTime();

var timer1 = new Timer('demo', count);
var timer2 = new Timer('demo1', count1);

function Timer(id, countDownDate) { 
  this.interval = setInterval(tick, 1000);

  function tick() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    var $elem = document.getElementById(id);

    $elem.getElementsByClassName("days")[0].innerHTML = 'days ' + days;
    $elem.getElementsByClassName("hours")[0].innerHTML = 'hours ' + hours;
    $elem.getElementsByClassName("minutes")[0].innerHTML = 'minutes ' + minutes;
    $elem.getElementsByClassName("seconds")[0].innerHTML = 'seconds ' + seconds;

    if (distance < 0) {
      clearInterval(this.interval);
      document.getElementById(id).innerHTML = "EXPIRED";
    }
  }
}

terminarz.php

<script src="countdowntimer.js"></script>
</head>

 <?php $date = date('M d, Y H:i:s', strtotime('7-3-2019 15:37:25')); ?>
 <?php $date1 = date('M d, Y H:i:s', strtotime('8-3-2019 15:37:25')); ?>		

<body>
</body>

No właśnie próbuję to złożyć mniej więcej jak wyżej w 3 osobnych plikach ale nie wychodzi mi to. Zamiast odliczania pojawia się coś takiego:

demo

days NaN

hours NaN

minutes NaN

seconds NaN

demo1

days NaN

hours NaN

minutes NaN

seconds NaN

Skrypt działa jeśli umieszczę go w terminarz.php lecz problem mam gdy to jest typowy plik .js(ak wyżej) i z tym sobie nie umiem poradzić. Gdyby ktoś mógł zerknąć i pomóc, z góry dziękuję. Pozdrawiam

0

W jakiej kolejności umieszczasz te skrypty, bo zdaje mi się, że JS powinien być poniżej HTML'a i PHP?

1

Wrzuciłeś kod JS do odrębnego pliku, który nie jest przetwarzany przez PHP, zatem masz w nim dosłownie new Date("<?php echo $date;?>").getTime();.

Cokolwiek chcesz mieć przetwarzane przez PHP, musi znajdować się w pliku przez niego uruchamianym.

Pomyśl, jak możesz zatem przekazać dane z PHP do JSa.

0

Nie wiem czy to powinno tak wyglądać, chociaż samemu nie jestem przekonany lecz tylko tak udało mi się to porozdzielać:
index.php

.....
</head>
	 <?php include('PHP/terminarz.php') ?>		
<body>
......

terminarz.php

   <?php
	   $date = date('M d, Y H:i:s', strtotime('19-5-2018 15:00:00')); 
	   $date1 = date('M d, Y H:i:s', strtotime('8-3-2019 15:37:25'));	
	?>		
<script>	
	var count = new Date("<?php echo $date;?>").getTime();
	var count1 = new Date("<?php echo $date1;?>").getTime();	
</script>

<script src="JS/Timer.js"></script>

Timer.js

var timer1 = new Timer('demo', count);
var timer2 = new Timer('demo1', count1);

function Timer(id, countDownDate) { 
  this.interval = setInterval(tick, 1000);

  function tick() {
    var now = new Date().getTime();
    var distance = countDownDate - now;
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
   	if (days<10) {days = '0' + days;}
	if (hours<10) {hours ='0' + hours;}
	if (minutes<10) {minutes ='0' + minutes;}
	if (seconds<10) {seconds ='0' + seconds;}  
	  
	var $elem = document.getElementById(id);

    $elem.getElementsByClassName("days")[0].innerHTML = days;
    $elem.getElementsByClassName("hours")[0].innerHTML = hours;
    $elem.getElementsByClassName("minutes")[0].innerHTML = minutes;
    $elem.getElementsByClassName("seconds")[0].innerHTML = seconds;

    if (distance < 0) {
      clearInterval(this.interval);
	  
	  document.getElementById(id).style.color = "#d1b333";
	   document.getElementById(id).style.fontSize = "30px";
      document.getElementById(id).innerHTML = "L I V E...!!!";
    }
  }
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1