Question

我正在进行倒计时，我想用表单设置。另外，我想存储我发送的数据。

我需要在网站的其他部分调用此计数器，因为我这样做是为了管理网页。

我不确定本地存储或AJAX是否是最佳选择，因为我不想仅为三个变量添加表格。

这是我的问题：哪种方式可以帮助我更好，或者我如何存储我需要的数据？我错过了什么吗？

这是我的表格：

<form action="counter.php"  method="post" > <br>
  <p>Only numbers</p>
  <input type="number" name="year" id="year" placeholder="year" required="true"><br>
  <input type="number" name="month" id="month" placeholder="month" required="true"><br>
  <input type="number"  name="day" id="day" placeholder="day" required="true"><br>
  <br>
  <input type="submit" name="" onclick="sendData()">
</form>

我的想法是通过帖子传递它，但它并没有像我预期的那样工作，因为每次我打电话counter.php它都会给我发送一个未定义的索引：年份＆＃34;错误。

接下来，我的counter.php：

 <?php

$dty = $_POST['year'];
$dtm = $_POST['month'];
$dtd = $_POST['day'];

echo $dty; ?>

<div class="row">    
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
      <tr class="info">
        <td align="center" id="days"></td>
        <td align="center" id="hours"></td>
        <td align="center" id="minutes"></td>
        <td align="center" id="seconds"></td>
      </tr>
      <tr>
        <td class="px7" align="center">Día</td>
        <td class="px7" align="center">hora</td>
        <td class="px7" align="center">min</td>
        <td class="px7" align="center">seg</td>
      </tr>
    </table>
  </div>    
  <br><br>
</div>

<br>
</div>
</div>

最后，我使用此JavaScript进行倒计时。现在它是静止的;计划是将数据存储在某处，以便将其传递给countDown函数。

<script type="text/javascript">

    function  countDown(){
        var now = new Date();
        var eventDay = new Date(2018,11,12);// año, dia, mes
        var currentTime = now.getTime();
        var eventTime = eventDay.getTime();

        var remTime = eventTime - currentTime;
        var s = Math.floor(remTime/1000);
        var m = Math.floor(s/60);
        var h = Math.floor(m/60);
        var d = Math.floor(h/24);

        h %= 24;
        m %= 24;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

        document.getElementById('days').textContent = d;
        document.getElementById('days').innerText = d;

        document.getElementById('hours').textContent = h;
        document.getElementById('minutes').textContent = m;
        document.getElementById('seconds').textContent = s;


        setTimeout(countDown, 1000);
    }

    countDown();

</script>

Answer 1

据我所知，你想做一个基本的倒计时？正在运行客户端。如果您对代码有任何疑问，请随时修改您的代码以使其正常工作！

<强>计数器

  if(isset($_POST)) { // Check if POST is send
    if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
      $year = $_POST['year']; // Overule default data with post data
      $month = $_POST['month'];
      $day = $_POST['day'];
    }
  }
?>

<div class="row">
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
        <tr class="info">
          <td align="center" id="days"></td>
          <td align="center" id="hours"></td>
          <td align="center" id="minutes"></td>
          <td align="center" id="seconds"></td>

        </tr>
        <tr>
          <td class="px7" align="center">Día</td>
          <td class="px7" align="center">hora</td>
          <td class="px7" align="center">min</td>
          <td class="px7" align="center">seg</td>
        </tr>
    </table>
    </div>
</div>

<script type="text/javascript">
var year = "<?=$year?>"; // Create javascript variables filled with php variables
var month = "<?=$month?>";
var day = "<?=$day?>";
countDown();

function  countDown(){
  var now = new Date();
  var eventDay = new Date(year,month,day);// año, dia, mes
  var currentTime = now.getTime();
  var eventTime = eventDay.getTime();

  var remTime = eventTime - currentTime;
  var s = Math.floor(remTime/1000);
  var m = Math.floor(s/60);
  var h = Math.floor(m/60);
  var d = Math.floor(h/24);

  h %= 24;
  m %= 24;
  s %= 60;

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  document.getElementById('days').textContent = d;
  document.getElementById('days').innerText = d;

  document.getElementById('hours').textContent = h;
  document.getElementById('minutes').textContent = m;
  document.getElementById('seconds').textContent = s;

  setTimeout(countDown, 1000);
}
</script>

<强>索引

<form action="counter.php" method="POST">
  <p>Only numbers</p>
  <input type="number" name="year" id="year" placeholder="year" required="true">
  <input type="number" name="month" id="month" placeholder="month" required="true">
  <input type="number"  name="day" id="day" placeholder="day" required="true">
  <input type="submit" value="Set timer">
</form>

更新05-01-2017（21:54） 找到了一种方式来存储＆＃34;年＆＃34;，＆＃34;月＆＃34;，＆＃34;日＆＃34;文本文档中的变量。这样就可以编辑数据并保留它，只要服务器是＆＃34; alive＆＃34;。

新计数页

  // Set default timer data
  $year = "2018";
  $month = "11";
  $day = "12";

  if(isset($_POST)) { // Check if POST is send
    if(isset($_POST['year']) && isset($_POST['month']) && isset($_POST['day'])) { // Check if post contains year, month, day
      $year = $_POST['year']; // Overule default data with post data
      $month = $_POST['month'];
      $day = $_POST['day'];

      file_put_contents($filename, $year + "," + $month + "," + $day);
    }
  } else if(file_exists($filename)) {
      $fileData = file_get_contents($filename);
      $fileData = explode(",", $fileData);

      $year = $fileData[0];
      $month = $fileData[1];
      $month = $fileData[2];
  }
?>

<div class="row">
  <div class="col-xs-12" align="rigth">
    <table class="countdownContainer" >
        <tr class="info">
          <td align="center" id="days"></td>
          <td align="center" id="hours"></td>
          <td align="center" id="minutes"></td>
          <td align="center" id="seconds"></td>

        </tr>
        <tr>
          <td class="px7" align="center">Día</td>
          <td class="px7" align="center">hora</td>
          <td class="px7" align="center">min</td>
          <td class="px7" align="center">seg</td>
        </tr>
    </table>
    </div>
</div>

<script type="text/javascript">
var year = "<?=$year?>";
var month = "<?=$month?>";
var day = "<?=$day?>";

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;

countDown();

function  countDown(){
  var now = new Date();
  var end = new Date(year,month,day);// año, dia, mes
  var distance = end - now;
  if(distance > 0) {
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById('days').innerHTML = days;
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = minutes;
    document.getElementById('seconds').innerHTML = seconds;

    setTimeout(countDown, 1000);
  }
}
</script>

Answer 2

您遇到的问题是即使在页面加载时也尝试加载post参数，这是一个get请求。要确保您只在邮寄时处理帖子参数，请执行以下操作：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Put here the code you need to run in case of post request only
}

如何用JavaScript做一个计数器

2 个答案: