Question

我正在制作一个应该显示倒计时的网页，如果它变为零，下一个倒计时应该开始，新的截止日期。现在，我已经在Javascript中做了倒计时部分，这是有效的我已经制作了一个php部分，可以在txt文件中读取截止日期，这也有效现在我已经找到了将php截止日期转移到javascript的方法，应该可行但。下一个截止日期必须在前一个完成时开始，所以它是00:00:00。有没有办法检查PHP中的html div的内容？所以它必须检查id = countdown的div的内容是否等于00:00:00

谢谢你们！编辑：命题重复问题没有解决我的问题...

<!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 "   ";
  }
}

$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){
  $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>";
  }
}
?>
<!-- end php functions -->

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body onload="startTime()">

<?php
//php vars:
$NumberOfDeadlines = 10;
 ?>

<div id="visible">
<div id="clock"><span> </span> </div><br>
<div id="countdown"> </span> </div>
</div>
<div id="inputs">

  <form>
<!-- <?php
for ($i=1; $i < $NumberOfDeadlines; $i++) { ?>
  deadline <?= $i ?> : <br>
  <label for="deadline<?= $i ?>H">Hour: </label>
  <input type="number" name="deadline<?= $i ?>H" id="deadline<?= $i ?>H"  min="0" max="23">
  <label for="deadline<?= $i ?>M">Minute: </label>
  <input type="number" name="deadline<?= $i ?>M" id="deadline<?= $i ?>M" min="0" max="59">
  <label for="deadline<?= $i ?>S">Second: </label>
  <input type="number" name="deadline<?= $i ?>S" id="deadline<?= $i ?>S" min="0" max="59">
  <label for="deadline<?= $i ?>Title">Title: </label>
  <input type="text" name="deadline<?= $i ?>Title" id="deadline<?= $i ?>Title">
  <br>
<?php
}
 ?> -->
<input type="submit" value="Submit">
</form>
</div>

<!-- javascript scripts -->
<script>
function startTime() {
    var now = new Date();
    //var deadline = new Date();                 NOT USED ANY MORE
    // year, month, day, hours, minutes, seconds, milliseconds
    var deadline = new Date(2016, 11, 9);
    var phpHours = <?php echo json_encode($GLOBAL[deadlineH]); ?>;
    var phpMinutes = <?php echo json_encode($GLOBAL[deadlineM]); ?>;
    var phpSeconds = <?php echo json_encode($GLOBAL[deadlineS]); ?>;
    deadline.setHours()
    
    //console.log(deadline);

    var clockH = now.getHours();
    var clockM = now.getMinutes();
    var clockS = now.getSeconds();

    // var countdownH = getCountdown(deadline).hours;
    // var countdownM = getCountdown(deadline).minutes;
    // var countdownS = getCountdown(deadline).seconds;

    //m = checkTime(m);
    //s = checkTime(s);

    startClock('clock');
    startCountdown('countdown', deadline);

    var t = setTimeout(startTime, 500);
}

function getCountdown(deadline){
  //console.log(Date.parse(deadline));
  //console.log(Date.parse(new Date()));
    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);
    countdown.innerHTML = checkTime(t.countdownH) + ':' + checkTime(t.countdownM) + ':' + checkTime(t.countdownS);
    if(t.countdownTotal <= 0){
      clearInterval(timeInterval);
    }
  }, 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

您是否将所有倒计时数据传输到html页面？如果是，则活动倒计时必须在结束时触发事件。如果是这样，你的下一个倒计时必须被'标记' 如果没有，并且倒计时必须触发一个事件，那么你可以对服务器进行ajax调用以获得下一个倒计时daba，甚至刷新页面以获得最新的倒计时。

修改：

我知道程序员不想放弃他们的代码，但我会建议你一个倒计时插件，它支持结束事件和其他许多功能。你可以在this link中进行伪造。

现在，为了获得下一个倒计时数据，正如我已经说过的那样，你必须在结束时进行ajax调用，或者在页面加载中获取所有这些数据。

我不知道这是否是你所需要的，但我希望我会帮助你。

祝你好运。

Answer 2

您只能使用php get_contents函数读取静态页面，例如：

$homepage = file_get_contents('http://www.google.com/');
echo $homepage;

如果您使用javascript操作数据，您还可以使用它来发出ajax请求，将div的内容发送到您的php脚本。

如果html div等于某个值，请检入PHP

2 个答案: