UNIRRY

WEBデザインとホロスコープと宇宙のブログ

サーバータイムの時間でカウントダウンを作成する

countdowng

でもカウントダウンを表示させたいファイルはHTML

という案件が前にあって、最近もまた必要らしいので、まとめたついでにアップします。
サーバーにphpが入っていたので、今回は「phpで裏でサーバータイムを取得してjsで表示させるという方法」を使いました。以下、コードの紹介です。

time.php

<?php
header("Content-type: application/x-javascript");

// 目標日の設定
$t1 = mktime(0, 0, 0, 7, 31, 2013);

// サーバータイムで今日を取得
$t2 = time();

// 1日の秒数計算
$day  = 60 * 60 * 24;

// 目標日から今日をひいて1日分で割った日数(つまりカウントダウン日数)
$count = ceil(($t1 - $t2) / $day);

// ドキュメントライトでカウントダウン日数の書き出し
if ( $count > 0 ) {
  echo "document.write($count)";
} else {
  echo "document.write($count)";
}

//--------------------------------------------------------------------
// 画像などを使用する場合は下記をドキュメントライトする
// 変数埋め込みのimgurl1をカウントダウン用、O.pngのimgurl2を目標日当日以降の表示用とする
//$imgur1 = '<img src="/milk/images/time/' . $count . '.png">';
//$imgur2 = '<img src="/milk/images/time/0.png">';
//--------------------------------------------------------------------
?>

出力するhtmlファイル

<span class="time">
7月31日までのカウントダウン<br><br>
あと <script src="/countdown/time.php" type="text/javascript"></script> 日です(^〇^)
</span>


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3