I'm building a webpage that shows multiple consecutive countdowns, depending from a text file. Almost everything works now, only one thing still doesn't want to work.
The problem is this: when the timer hit's 00:00:00, it should switch to the next countdown, and start counting down, but what is does is showing some kind of glitch, it flashes between nan:nan:nan and 23:59:xx, like the countdown started again, counting down to the next day. I wrote some stuff to the console, and here I see that my function to set a new deadline in javascript is called, and the deadlinecounter does go up; but it goes up from 0 to 6 first, en later from 0 to 7. very strange I would say. Hope someone can help me!
this is my code:
<!DOCTYPE html>
<!-- php functions -->
<?php
$deadlineH = null;
$deadlineM = null;
$deadlineS = null;
$deadlineTitle = null;
$filename = "data.txt";
$fp = fopen($filename, "r");
$content = fread($fp, filesize($filename));
$fullArray = setFullArray($content);
$length = count($fullArray);
for ($i = 0; $i < $length - 1; $i++) {
$value = $fullArray[$i];
echo "var " . ($i + 1) . ": " . $fullArray[$i] ." <br>";
if((($i+1) % 4) == 0){
echo " ";
}
}
$hoursArray = [];
$minutesArray = [];
$secondsArray = [];
$titlesArray = [];
setArrays($fullArray);
function setArrays($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length - 1; $i = $i+4) {
array_push($GLOBALS['hoursArray'], $fullArray[$i]);
}
for ($j=1; $j < $length - 1; $j = $j+4) {
array_push($GLOBALS['minutesArray'], $fullArray[$j]);
}
for ($k=2; $k < $length - 1; $k = $k+4) {
array_push($GLOBALS['secondsArray'], $fullArray[$k]);
}
for ($l=3; $l < $length - 1; $l = $l+4) {
array_push($GLOBALS['titlesArray'], $fullArray[$l]);
}
}
$numberoflines = getNumberOflines($fullArray);
echo "number of lines: " . $numberoflines . "<br>";
showDeadlines($fullArray);
function setFullArray($content){
$fullArray = preg_split("/(:|
)/" ,$content); // splits the whole data txt file into small chunks, everything apart
return $fullArray;
}
function getNumberOflines($fullArray){
$numberoflines = (sizeof($fullArray) - 1) / 4;
return $numberoflines;
}
function showDeadlines($fullArray){ // won't be used in final thing
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$deadlineH = $fullArray[$i];
$deadlineM = $fullArray[$i+1];
$deadlineS = $fullArray[$i+2];
$deadlineTitle = $fullArray[$i+3];
echo "deadline " . $deadlineNumber . ": " . $deadlineH . ":" . $deadlineM . ":" . $deadlineS . " titel : " . $deadlineTitle . "<br>";
}
}
function setDeadline($fullArray){
$length = count($fullArray);
for ($i=0; $i < $length-1; $i = $i + 4) {
$deadlineNumber = ($i + 4)/4;
$GLOBALS['deadlineH'] = $fullArray[$i];
$GLOBALS['deadlineM'] = $fullArray[$i+1];
$GLOBALS['deadlineS'] = $fullArray[$i+2];
$GLOBALS['deadlineTitle'] = $fullArray[$i+3];
}
}
?>
<!-- end php functions -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="startTime()">
<div id="visible">
<div id="clock"><span> </span> </div><br>
<div id="countdown"> </div>
<div id="countdown"> </div>
<div id="title"> </div>
</div>
<p>
<?php
echo json_encode($hoursArray);
echo json_encode($minutesArray);
echo json_encode($secondsArray);
echo json_encode($titlesArray);
?>
</p>
</div>
<!-- javascript scripts -->
<script>
var hoursArray = [];
var minutesArray = [];
var secondsArray = [];
var titlesArray = [];
var deadlineCounter;
function startTime() {
var now = new Date();
// year, month, day, hours, minutes, seconds, milliseconds
var deadline = new Date(2016, 11, 20, 00 ,00 ,00 ,00);
deadlineCounter = 0;
var clockH = now.getHours();
var clockM = now.getMinutes();
var clockS = now.getSeconds();
setArrays();
setInitialDeadline(deadline);
startClock('clock');
startCountdown('countdown', deadline);
var t = setTimeout(startTime, 500);
}
function setArrays(){
hoursArray= <?php echo json_encode($hoursArray); ?>;
console.log( hoursArray );
minutesArray= <?php echo json_encode($minutesArray); ?>;
console.log( minutesArray );
secondsArray= <?php echo json_encode($secondsArray); ?>;
console.log( secondsArray );
titlesArray= <?php echo json_encode($titlesArray); ?>;
console.log( titlesArray );
}
function setInitialDeadline(deadline) {
deadline.setHours(hoursArray[0]);
deadline.setMinutes(minutesArray[0]);
deadline.setSeconds(secondsArray[0]);
document.getElementById("title").innerHTML = titlesArray[0];
}
function setNewDeadline(deadline){
console.log('new deadline set');
deadline.setHours(hoursArray[deadlineCounter]);
deadline.setMinutes(minutesArray[deadlineCounter]);
deadline.setSeconds(secondsArray[deadlineCounter]);
document.getElementById("title").innerHTML = titlesArray[deadlineCounter];
}
function getCountdown(deadline){
var countdownTotal = Date.parse(deadline) - Date.parse(new Date());
var countdownS = Math.floor( (countdownTotal/1000) % 60 );
var countdownM = Math.floor( (countdownTotal/1000/60) % 60 );
var countdownH = Math.floor( (countdownTotal/(1000*60*60)) % 24 );
return{
'countdownTotal': countdownTotal,
'countdownH': countdownH,
'countdownM': countdownM,
'countdownS': countdownS
}
}
function startClock(id){
var clock = document.getElementById(id);
var timeInterval = setInterval(function(){
var now = new Date();
var nowH = now.getHours();
var nowM = now.getMinutes();
var nowS = now.getSeconds();
nowH = checkTime(nowH);
nowM = checkTime(nowM);
nowS = checkTime(nowS);
clock.innerHTML = nowH + ':' + nowM + ':' + nowS;
}, 1000);
}
function startCountdown(id, deadline){
var countdown = document.getElementById(id);
var timeInterval = setInterval(function(){
var t = getCountdown(deadline);
//console.log(t);
//console.log(deadlineCounter);
countdown.innerHTML = checkTime(t.countdownH) + ':' + checkTime(t.countdownM) + ':' + checkTime(t.countdownS);
if(t.countdownH == 0 && t.countdownM == 0 && t.countdownS == 0){
deadlineCounter++;
setNewDeadline(deadline);
t = getCountdown(deadline);
}
}, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
<!-- //end javascript -->
</body>
</html>
Thanks!
