質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • PHP

    23997questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScriptによる時間制御

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 384

YutaNkai

score 49

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • papinianus

    2019/01/18 20:06

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

    キャンセル

  • YutaNkai

    2019/01/18 20:09

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

    キャンセル

  • 退会済みユーザー

    2019/03/02 00:25

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

+3

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/18 21:09

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

    キャンセル

  • 2019/01/18 21:17

    サーバに「終了時間が来ているか?」を問い合わせ、レスポンスで時間が来ていると回答があれば「終了しました」と表示を差し替えればよいです。

    ただ、時間が来たらサーバから push される仕組みのほうが良いと思いますよ。
    node.js とかのほうが実装は楽そう。

    キャンセル

  • 2019/01/18 21:35

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

    キャンセル

  • 2019/01/19 10:04

    > Ajaxは基本的にJSとJqueryだと基本的にはJQueryで使うのが主流なのでしょうか。

    主流とか判断するための材料を集めるのがめんどいので、ご自身で調査して判断してください。

    ただ、小規模にテスト構築してみたいということであれば、jQuery の利用は非常にお手軽です。

    キャンセル

  • 2019/01/19 10:38

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

    キャンセル

  • 2019/01/20 09:57

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

    キャンセル

  • 2019/01/22 18:51

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

    キャンセル

  • 2019/01/22 19:54

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

    キャンセル

+2

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

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


いまさらですが

<?
$limit = "サーバから終了時刻を読み取り";
$now = new DateTime();
if($limit <= $now) { 
  echo "このオークションは終了しています";
  require("finished_template.php");
} else {
  require("on_going_auction_template.php");
}
// on_going_auction_template.php
<script>
  const limit = <?=$now?>;
//タイマ処理
  if(タイマが0になった) { location.reload(); }
</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/18 20:27

    質問を編集します。

    キャンセル

  • 2019/01/18 20:31

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

    キャンセル

  • 2019/01/18 20:37

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

    キャンセル

  • 2019/01/18 20:54

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

    キャンセル

  • 2019/01/18 20:56

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

    キャンセル

  • 2019/01/19 09:43

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

    キャンセル

  • 2019/01/19 20:00 編集

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

    キャンセル

  • 2019/01/20 09:52

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

    キャンセル

  • 2019/01/22 18:51

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

    キャンセル

  • 2019/01/22 19:54

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

    キャンセル

  • 2019/01/31 22:51

    ありがとうございます。1週間ほど外しておりました。
    少し挙動に問題がありますので質問します。長くお付き合い頂きありがとうございました。

    キャンセル

check解決した方法

-2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    23997questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。