如何用 JavaScript 做一个计数器

Question

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

我需要在网站的其他部分调用此计数器，因为我正在为网页的管理员执行此操作。

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

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

这是我的表格：

<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>

我的想法是通过 post 传递它，但它没有像我预期的那样工作，因为每次我调用 counter.php 它都会向我发送一个 "Undefined index: year" 错误。

接下来，我的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) 找到了一种在文本文档中存储 "year"、"month"、"day" 变量的方法。这样就可以编辑数据并在服务器为 "alive".

时保留它

新计数器页面

  // 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 参数，这是一个获取请求。为确保仅在 post 情况下处理 post 参数，请执行以下操作：

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

如何用 JavaScript 做一个计数器

How to do a counter with JavaScript

javascript

php

countdownevent

jquery-countdown