JavaScriptによる時間制御

PHP変数$endがfalseであれば入札するボタンを、
trueであれば'このオークションは終了しました'と表示させたいです。

先にPHPで締め切り時間をとってきます。その時点で過去であれば挙動は問題ないのですがJSで残り時間が0になると
location.reloadのところに行かずに、また残り23時間59分59秒と新たにカウントダウンが始まってしまいます。どこが問題でしょうか。

【追記】
また残り23時間59分59秒と新たにカウントダウンが始まってしまいます

これについてですが、このプログラムの制御は残り時間が1時間を切ったら1秒更新でタイマーを切り替えています。
残り時間が0秒になり、新たに残り23時間59分59秒と新たにカウントダウンが始まって場合は1秒更新でプログラムが動いているので制御はできていると思うのですが、コンソールすると時間にマイナス表記がありません。なぜでしょうか。

<?php

$end = false;
$year   = 2019;
$month  = 01;
$day    = 20;
$hour   = 19;
$minute = 37;
$second = 00;
$datetime = new DateTime("$year/$month/$day $hour:$minute:$second");
$current  = new DateTime('now');
$diff= $current->diff($datetime);

if ($diff ->invert == 1) {
    $end = true;
}

?>

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="../Shopping/jquery-3.3.1.min.js"></script>
</head>

<body>

  <div class="dobid">

    <?php if ($end == false): ?>
    <a href="#">入札する</a>
    <span>残り</span><span class="time"></span>
    <?php elseif ($end == true): ?>
    <p>このオークションは終了しました</p>
    <?php endif ?>

  </div>

</body>

<script>
  var end = '<?php echo $end; ?>';
  var year = '<?php echo $year; ?>';
  var month = '<?php echo $month; ?>';
  var day = '<?php echo $day; ?>';
  var hour = '<?php echo $hour; ?>';
  var minute = '<?php echo $minute; ?>';

  var cutoff = new Date();
  cutoff.setFullYear(year);
  cutoff.setMonth(month);
  cutoff.setDate(day);
  cutoff.setHours(hour);
  cutoff.setMinutes(minute);
  cutoff.setSeconds(00);

  var countdown = function(cutoff) {
    var now = new Date();
    var rest = cutoff.getTime() - now.getTime();
    var sec = Math.floor(rest / 1000) % 60;
    var min = Math.floor(rest / 1000 / 60) % 60;
    var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
    var days = Math.floor(rest / 1000 / 60 / 60 / 24);
    var count = [days, hours, min, sec];
    return count;
  }

  var recalc = function() {
    var count = countdown(cutoff);
    if (count[2] < 0) {
      location.reload();//質問
    } else {
      var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
      $('.time').text(time);
      refresh();
    }
  }

  var refresh = function() {
    setTimeout(recalc, 1000);
  }

  if (end == false) {
    var count = countdown(cutoff);

    if (count[2] < 0) {
      location.reload();//質問
    } else if (count[1] < 1) {
      recalc();
    } else {
      var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
      $('.time').text(time);
    }
  }
</script>

</html>

papinianus

2019/01/18 11:06

できないのですが、できるとして何がしたいか説明していただけますか？

Chandler_Bing

2019/01/18 11:09

ありがとうございます。 $endがtrueになったら入札ボタンを消そうと考えています。ただできないようですので、JSで書き換えます。

行動規範の内容に同意します

回答3件

これ、ちゃんと動くものとして検討しているのであれば、設計から考え直したほうが良いです＾＾；
ユーザの手の届く範囲に改変されてはまずいデータを置くのは厳禁です。

JavaScript内で残り時間が0になった時点で、$endの変数をtrueに変更したいのですが、どのように行えば良いですか。

ブラウザ内の挙動をサーバに伝達する方法は
・POST
・GET
・Cookie
の3種類があります。

どれでもイイので、$end を変更するためのフラグを投稿し、その投稿を受けて $end を変更すれば良いです。
リロードを伴うのを避けるのであれば、ajax 等を使用すると良いです。

投稿2019/01/18 11:53

退会済みユーザー

総合スコア0

Chandler_Bing

2019/01/18 12:09

仮にPOSTに送信する場合ajaxで何をどのようにすれば良いでしょうか。

退会済みユーザー

2019/01/18 12:17

サーバに「終了時間が来ているか？」を問い合わせ、レスポンスで時間が来ていると回答があれば「終了しました」と表示を差し替えればよいです。ただ、時間が来たらサーバから push される仕組みのほうが良いと思いますよ。 node.js とかのほうが実装は楽そう。

Chandler_Bing

2019/01/18 12:35

ありがとうございます。まだいまいちAjaxがどのようなものなのか理解しきれていないので、基礎学習をします。 Ajaxは基本的にJSとJqueryだと基本的にはJQueryで使うのが主流なのでしょうか。

退会済みユーザー

2019/01/19 01:04

> Ajaxは基本的にJSとJqueryだと基本的にはJQueryで使うのが主流なのでしょうか。主流とか判断するための材料を集めるのがめんどいので、ご自身で調査して判断してください。ただ、小規模にテスト構築してみたいということであれば、jQuery の利用は非常にお手軽です。

退会済みユーザー

2019/01/19 01:38

またこいつですか・・・・・斜めに勉強しかしないやつ

退会済みユーザー

2019/01/20 00:57

この方向で実装しても実用に耐えないんで、ちゃんと設計してほしいなぁ。。。

Chandler_Bing

2019/01/22 09:51

コードを編集いたしましたのでご教授お願いします。

Chandler_Bing

2019/01/22 10:54

monthに-1をするのを忘れておりました。ありがとうございました。

行動規範の内容に同意します

その用途ならjsでやったほうがいいと思いますが、もしやるならフラグではなく、タイマーが切れたときに、リロードさせると良いかと思います。

また、PHPというかサーバ側というか、は、終了時刻のみを持てばよくフラグを持つ必要がないと思います。また終了時刻はPHPからjsに伝えるのが良さそうです。

いまさらですが

PHP
1<?
2$limit = "サーバから終了時刻を読み取り";
3$now = new DateTime();
4if($limit <= $now) { 
5  echo "このオークションは終了しています";
6  require("finished_template.php");
7} else {
8  require("on_going_auction_template.php");
9}

PHP
1// on_going_auction_template.php
2<script>
3  const limit = <?=$now?>;
4//タイマ処理
5  if(タイマが0になった) { location.reload(); }
6</script>

投稿2019/01/18 11:22

編集2019/01/23 01:08

papinianus

総合スコア12705

Chandler_Bing

2019/01/18 11:27

質問を編集します。

Chandler_Bing

2019/01/18 11:31

今のところ終了時間をDBからPHPで取得しそれをJSで締め切り時間として設定します(動作確認済み) そのリロードを使えばできそうな気がするのですが、その際、昨日実現の為にはどうすれば良いでしょうか。 PHPで判定でしょうか。

papinianus

2019/01/18 11:37

if (count[3] < 0) { document.getElementById('end').textContent = '終了'; } このあたりがカウンタが回りきったところだと思いますが、テキストを設定するのではなく、window.locationを書換えてリロードし、PHPで今が終了時刻以降であれば、ボタンなどのテキストを終了状態にするようなechoをする処理を想定しました

Chandler_Bing

2019/01/18 11:54

ありがとうございます。一度試してみます。

Chandler_Bing

2019/01/18 11:56

ただリロードをするとまたJSで時間計算、リロードというループになるのですが。

papinianus

2019/01/19 00:43

終了時刻よりも後に(何日もたってから)訪問するひともいるはずなので、jsは現在時刻がサーバ(php)が与えた終了時刻より後であればタイマーを開始しない抑制は当然必要なはずで、それがあればリロード時も抑制されることが期待できます。どうしてもわかりにくければ、別ページに遷移すればよいだけです(jsが遷移先を変えてもいいですし、PHPが終了時刻を判定してheader関数で転送してもよい)。

Chandler_Bing

2019/01/19 11:00 編集

ありがとうございます。その制御は仮にオークションが終了していたら$endをtrueにし、それをJSに渡してあげて、それが false(オークション中)ならというif文に全て入れる感じでしょうか。

papinianus

2019/01/20 00:52

多分、同じ意味のことを言っていると思います。月曜になりますが、制御部分の概念コードをお示しします。

Chandler_Bing

2019/01/22 09:51

コードを編集いたしましたのでご教授お願いします。

Chandler_Bing

2019/01/22 10:54

monthに-1をするのを忘れておりました。ありがとうございました。