Question

我正在构建一个显示多个连续倒计时的网页，具体取决于文本文件。几乎一切现在都有效，只有一件事仍然不能发挥作用。

问题是这个 ：当计时器到达00:00:00时，它应该切换到下一个倒计时，并开始倒计时，但是什么是显示某种故障，它在nan：nan：nan和23：59：xx之间闪烁，就像倒计时再次开始，倒计时到第二天。我在控制台上写了一些东西，在这里我看到我在javascript中设置一个新的截止日期的函数被调用，而deadlinecounter确实上升了;但它首先从0上升到6，后来从0到7上升。我会说非常奇怪。希望有人可以帮助我！

这是我的代码：

<!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("/(:|\n)/" ,$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>

谢谢！

Answer 1

正确调用内部函数startTime()，如下所示：var t = setTimeout(startTime, 500);。也许最好从func body中删除这一行并写一下：

<body onload="setTimeout(startTime(), 500)">

javascript倒计时出现奇怪错误

1 个答案: