• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32013/09/17 23:01:29

  満足100pt

  こんな感じになると思います。
  
  index.php (抜粋)

      ...
      <script>
      <?php
          echo 'var finish = ' . $finish . ';';
          echo 'var url = "' . $url . '";';
          /*
              var finish = 21;
              var url = "http://hoge.com/";
  
              というふうに出力されることを期待する。
          */
      ?>
      </script>
  {literal}
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="/js/jquery.countdown.js" type="text/javascript"></script>
      <script>
      // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
      $(function(){
          m = getFinishTime(parseInt(finish));
          countDown(url);
      });
      </script>
  {/literal}
      ...
  

  
  

  jquery.countdown.js (抜粋)

  function getFinishTime(e){  // ★関数として定義
      var datetime = new Date();
      return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
  }
  
  function countDown(url){    // ★引数で受け取る
      ...
      if(diff > 0){
          ...
      }else{
          //終了した時のテキスト
          $("#Timer").text('Time Over !!');
          location.href=url;  // ★引数を使う
          document.getElementById("intime").style.display = "none";
          document.getElementById("timeover").style.display = "block";
      }
  }
  

  
  
  
  

  ---

  追記です。
  
  終了時刻を計算した m が、うまく渡せていないことに気が付きました。
  名前空間の汚染も抑えた形で、ちょっと書き直してみました。
  index.php (抜粋)

      ...
  {literal}
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="/js/jquery.countdown.js" type="text/javascript"></script>
  {/literal}
      <script>
      // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
      $(function(){
      <?php
          echo 'var finish = ' . $finish . ';';
          echo 'var url = "' . $url . '";';
          /*
              var finish = 21;
              var url = "http://hoge.com/";
  
              というふうに出力されることを期待する。
          */
      ?>
          var m = getFinishTime(parseInt(finish));
          countDown(url, m);
      });
      </script>
      ...
  

  
  

  jquery.countdown.js (抜粋)

  function getFinishTime(e){  // ★関数として定義
      var datetime = new Date();
      return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
  }
  
  function countDown(url, m){    // ★引数で受け取る（終了時刻も）
      ...
      if(diff > 0){
          $("#Timer").text(sec +'秒');
          setTimeout(function() {
                  countDown(url, m);  // ★引数として渡す
              }, 10);
          document.getElementById("intime").style.display = "block";
          document.getElementById("timeover").style.display = "none";
      }else{
          //終了した時のテキスト
          $("#Timer").text('Time Over !!');
          location.href=url;  // ★引数を使う
          document.getElementById("intime").style.display = "none";
          document.getElementById("timeover").style.display = "block";
      }
  }
  

  スター

  • 

    4件のコメントを見る

  • appfb 2013/09/17 23:27:25

    ご回答ありがとうございます。
    なるほどですね～
    jquery.countdown.js は関数だけにして、呼び出す部分をhtml側に持ってきてるのですね～。
    今から早速やってみます！

    スター

  • a-kuma3 2013/09/18 00:08:14

    今どきの javascript 事情だと、いろいろなライブラリを組み合わせて使うので、名前空間を汚すことを嫌う風潮があります。
    このコードで言うと、関数名の getFinishTime() や countDown()、変数の finish と url です。
    書き方を工夫すれば、もっと減らすことはできますが、php で javascript のコードの一部を吐き出す、というところは変わらないです。
    
    あ、終了時間の m が渡せてない...

    スター

  • a-kuma3 2013/09/18 00:16:41

    すみません。
    終了時刻をうまく渡せていないと思うので、回答に修正したコードを追記しました。

    スター

  • appfb 2013/09/18 11:44:47

    できました！
    教えていただいたことは先日中に希望通り動くことを確認していたのですが、smartyの変数受け取りにスマートな方法はないかと手間取っていました。
    
    > 今どきの javascript 事情だと、いろいろなライブラリを組み合わせて使うので、名前空間を汚すことを嫌う風潮があります。
    なるほど･･･。
    勉強になります、ありがとうございました！

    スター

その他の回答

• appfb

  2013/09/17 22:26:12

  jquery.countdown.js

  $(function(){
  	m = getFinishTime(parseInt(21));
  	function getFinishTime(e){
  		var datetime = new Date();
  		return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
  	}
  	countDown();
  });
  function countDown(){
  	var startTime = new Date();
  	var endTime = new Date(m);
  	var diff	= endTime - startTime;
  	var times	= 24 * 60 * 60 * 1000;
  	var day		= Math.floor(diff / times)
  	var hour	= Math.floor(diff % times / (60 * 60 * 1000))
  	var min		= Math.floor(diff % times / (60 * 1000)) % 60
  	var sec		= Math.floor(diff % times / 1000) % 60 % 60
  	var ms		= Math.floor(diff % times / 10) % 100
  	if(diff > 0){
  		$("#Timer").text(sec +'秒');
  		setTimeout('countDown()', 10);
  		document.getElementById("intime").style.display = "block";
  		document.getElementById("timeover").style.display = "none";
  	}else{
  		//終了した時のテキスト
  		$("#Timer").text('Time Over !!');
  //		location.href="http://hoge.com/";
  		document.getElementById("intime").style.display = "none";
  		document.getElementById("timeover").style.display = "block";
  	}
  }
  

  index.php

  <!DOCTYPE html>
  <html lang="ja">
  <head>
  	<meta charset="UTF-8">
  	<link href="{$root_surl}css/master.css" rel="stylesheet" type="text/css">
  {literal}
  	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  	<script src="/js/jquery.countdown.js" type="text/javascript"></script>
  {/literal}
  </head>
  
  <body>
  		<div id="Timer"></div>
  		<div id="intime">
  			<p>ハロー(*^。^*)</p>
  		</div>
  		<div id="timeover" style="display:none;">
  			<p>タイムオーバーとなりました(・_・;)</p>
  		</div>
  </body>
  </html>
  

• appfb

  2013/09/17 22:47:43

  質問文を編集しました。詳細はこちら。

• appfb

  2013/09/17 23:12:17

  質問文を編集しました。詳細はこちら。

この質問へのコメント

質問の情報

登録日時

2013-09-17 22:24:00

終了日時

2013-09-18 11:45:24

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 　はてな最終ベストアンサー ～ The Last of Best Anser in Hatena ～ 　あなたの自薦他薦ベストアンサーを…adlib11日前
• 韓国でも、高校生のことをJKといいますか？匿名質問者11日前
• 経済について、初歩的な質問で恐縮です。年収の壁の問題は、年収の枠を大きくするという単純な策では解決し…匿名質問者2112日前
• 今病院に通っていて、ガンジダと診断されてしまいました。そして病院で薬を入れてもらったのですが、2週間…匿名質問者12日前
• 初めておばあちゃんに誕生日プレゼントをあげるので、実際にプレゼントして喜ばれた物やオススメの商品を知…chabochang51日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ