プロが教える店舗＆オフィスのセキュリティ対策術

PHPとjavascriptを融合させたカウントダウンを作りたい

解決済

  • 質問者：di-keichu
  • 質問日時：
  • 回答数：1件

PHPとjavascriptを融合させたカウントダウンを作りたい

宜しくお願い致します。
現在、アクセスした時刻から時計が「0秒」を指すまでのカウントダウンを
表示させているのですが、
これを、PHPで取得したサーバー時刻を使ったカウントダウンにしたい
と思っています。

現在、利用しているjavascriptは、

－－－－－－－－－－－－－－－－
<script type="text/javascript">
<!--
function tokei()
{
date=new Date();
second=date.getSeconds();
var str=60-second;
document.getElementById("tokei").innerHTML=str;
}
//-->
</script>
<body onload="window.setInterval('tokei()',100)">
－－－－－－－－－－－－－－－－


なのですが、これを、

－－－－－－－－－－－－－－－－
<script type="text/javascript">
<!--
function tokei()
{
second=<?php print date(s) ?>;
var str=60-second;
document.getElementById("tokei").innerHTML=str;
}
//-->
</script>
<body onload="window.setInterval('tokei()',100)">
－－－－－－－－－－－－－－－－

というイメージでカウントダウンさせたいのですが、
何か方法はございますでしょうか？それともPHPを利用する時点で
不可能な話でしょうか？
(試しに後述のスクリプトを実践してみた所、案の定PHPで取得した秒で
カウントダウンは止まってしまいます)

それでは宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yutuo
  • 回答日時：

<script type="text/javascript">


<!--
var second=<?php print date(s) ?>;
function tokei()
{
var str=second;
document.getElementById("tokei").innerHTML=str;
second -= 1;
if (second<= 0) window.clearInterval();
}
//-->
</script>
<body onload="window.setInterval('tokei()',1000)">

この回答への補足

ご回答ありがとうございます。
こちら、実践してみたところ、リロードする度にカウントダウンの残り秒数が増えて
しまいます。それと、放置しておくと際限なく秒数がマイナスで増えていくのですが、
できれば、 2秒 → 1秒 → 0秒 → 59秒 → 58秒　…と、
ループさせたいのですが可能でしょうか。

補足日時：2010/02/24 18:30
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

解決致しましたのでご報告です。
下記のようなスクリプトを組む事でカウントダウンが行えるようになりました。

<script type="text/javascript">
<!--
var phpsecond=<?php print date(s) ?>;
var nowsecond=phpsecond;
var secondcount=60;
function tokei(){
document.getElementById('tokei').innerHTML=secondcount-nowsecond;
nowsecond++;
setTimeout('tokei()',1000);
}
//-->
</script>
<body onload="tokei()">

通報する
お礼日時：2010/02/27 16:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報