0

フォームで設定したいカウントダウンを作成しています。また、送信するデータを保存したいと思います。

Web ページの管理者のためにこれを行っているため、このカウンターをサイトの他の部分で呼び出す必要があります。

3 つの変数のためだけにテーブルを追加したくないので、ローカル保存と 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「未定義のインデックス：年」エラーが送信されるため、期待どおりに機能しませんでした。

次に、私の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>
4

2 に答える 2

0

私が理解している限り、基本的なカウントダウンを行いたいですか? それはクライアント側で実行されています。あなたのコードを修正して機能させました。コードに関して質問がある場合は、お気軽に質問してください。

カウンター 

  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>

UPDATE 05-01-2017 (21:54) テキスト ドキュメントに「年」、「月」、「日」の変数を格納する方法が見つかりました。このようにして、サーバーが「稼働中」である限り、データを編集して保持することができます。

新しいカウンターページ 

  // 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>
于 2017-01-05T18:53:09.173 に答える