ある限定された日時までのカウントダウンサイトを作りたいです。時間、分、秒の数字をimageファイルで表示したいと思っています。どうやって作ったらよいのでしょう?JavascriptでもCGIでもかまいません。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/03/29 21:03:45
  • 終了:2006/04/05 21:05:06

回答(6件)

id:dreamworks No.1

dreamworks回答回数249ベストアンサー獲得回数62006/03/29 21:44:36

ポイント18pt

カウントダウン

http://x.haun.org/misc/countdown.html

(ソース参照)

http://wakouji.at.infoseek.co.jp/countdl.htm


イメージ

http://ml.fureai.or.jp/~js-ml/20040622/8346.html

>setTimeoutを使って定期的に分をチェックして、その分に対応する画像に 入れ替えればできあがりです。

http://www.openspc2.org/reibun/javascript/#18

一定時間ごとに画像を入れ替える。

id:ikuyy

この説明だけだと私には理解できません。。。

う~。

2006/03/29 22:30:41
id:ToMmY No.2

ToMmY回答回数656ベストアンサー獲得回数192006/03/29 21:45:00

ポイント18pt

http://www.cj-c.com/java_s/java15.htm

これが数値で表示するプログラムですね。

JavaScriptでもCGIでも画像を表示させることはできます。

画像表示についてはCGIの本にのってたので細かいことを書くとめんどくさいことになりそうなので割愛しますが、CGIに"?num=.."というかんじでわたし、絵のファイルを読み出しにいってもらうようにできます。

カウントダウン前のときに見られたくない場合、CGIでもJSでも可能です。

http://hp.xrea.jp/m/t/7.html

ここにもサンプルがありますが、終わったあとにアクセスされた場合、<META HTTP-EQUIV="refresh" CONTENT="10;URL='index.html'">これで飛ばすように設定できます。

http://www.site-cooler.com/cgi-bin/kansuu.cgi?lang=perl&meth...

これを用いて

a=localtime(time);

if(a[4]<12){

print "<META HTTP-EQUIV="refresh" CONTENT="10;URL='index.html'">";

}

こんなかんじで飛ばせばよいのです。(この場合12日より前の日にちなら飛ぶ)

id:WANT No.3

WANT回答回数118ベストアンサー獲得回数92006/03/29 21:45:11

ポイント18pt

 こちらのカウントダウンCGIを利用すれば、

画像を利用したカウントダウンができますよ。

http://mdstoy.vis.ne.jp/program/cgiscript/countdown/index.ht...

id:ikuyy

こういうことなのですが、時間、分、秒も表示したいのです。このスクリプトを使ってそれができるのでしょうか?プログラマでないので、よくわかりません。。。

2006/03/29 22:26:10
id:Asuca No.4

Asuca回答回数281ベストアンサー獲得回数42006/03/29 21:50:01

ポイント17pt

200選 超簡単JavaScriptより

日付のカウントダウン

http://www14.plala.or.jp/sugachuu/JavaScript/d16.html

使えますか?

id:Asuca No.5

Asuca回答回数281ベストアンサー獲得回数42006/03/29 22:00:17

ポイント17pt

すいません リンク間違えました

http://www14.plala.or.jp/sugachuu/JavaScript/2001/cdown1.htm...

こっちです

id:ikuyy

私が知りたいのはこれを画像で表示する方法です。

2006/03/29 22:31:30
id:Kenju No.6

Kenju回答回数30ベストアンサー獲得回数22006/04/05 17:22:40

ポイント17pt

var objCD = new CountDown();

var objImg = new ImageList();

window.onload = function()

{

  objCD.setTarget(new Date(2006, 3, 16, 9, 29, 59));

  objImg.setImage(0, "./image/0.png");

  objImg.setImage(1, "./image/1.png");

  objImg.setImage(2, "./image/2.png");

  objImg.setImage(3, "./image/3.png");

  objImg.setImage(4, "./image/4.png");

  objImg.setImage(5, "./image/5.png");

  objImg.setImage(6, "./image/6.png");

  objImg.setImage(7, "./image/7.png");

  objImg.setImage(8, "./image/8.png");

  objImg.setImage(9, "./image/9.png");

  ChangeImage(objCD.getArrivalTime());

}

function ChangeImage(atTime)

{

  var tagCount = document.getElementById("counter");

  var tagHtml = "";

  var atDate, atHour, atMinite, atSecond;

  atDate = Math.floor(atTime / 86400);

  atTime %= 86400;

  atHour = Math.floor(atTime / 3600);

  atTime %= 3600;

  atMinite = Math.floor(atTime / 60);

  atTime %= 60;

  atSecond = (atTime < 0 ? 0 : atTime);

 //日をイメージに差し替え

  if( atDate > 0 )

  {

    atDate = "" + atDate;

    for(var ix = 0; ix < atDate.length; ix++)

      tagHtml += "<" + "img src=\"" + objImg.getImage(atDate.substring(ix, ix + 1)).src + "\">";

    tagHtml += "日";

  }

 //時間をイメージに差し替え

  if( atDate > 0 || atHour > 0 )

  {

    atHour = (atHour < 10 ? "0" : "") + atHour;

    for(var ix = 0; ix < atHour.length; ix++)

      tagHtml += "<img src=\"" + objImg.getImage(atHour.substring(ix, ix + 1)).src + "\">";

    tagHtml += "時間";

  }

 //分をイメージに差し替え

  if( atDate > 0 || atHour > 0 || atMinite > 0 )

  {

    atMinite = (atMinite < 10 ? "0" : "") + atMinite;

    for(var ix = 0; ix < atMinite.length; ix++)

      tagHtml += "<img src=\"" + objImg.getImage(atMinite.substring(ix, ix + 1)).src + "\">";

    tagHtml += "分";

  }

 //秒をイメージに差し替え

  atSecond = (atSecond < 10 ? "0" : "") + atSecond;

  for(var ix = 0; ix < atSecond.length; ix++)

    tagHtml += "<img src=\"" + objImg.getImage(atSecond.substring(ix, ix + 1)).src + "\">";

  tagHtml += "秒";

  tagCount.innerHTML = tagHtml;

  setTimeout("ChangeImage(objCD.getArrivalTime())", 500);

}

function CountDown()

{

  this.targetTime = new Date();

 /** 到達時間を取得します。

  * @param argTime Dateオブジェクトで指定する現在時刻。

  * @return 目標までの到達時間を秒数で返します。

  */

  this.getArrivalTime = function(argTime)

  {

    var nowTime;

    if( argTime instanceof Date )

      nowTime = argTime;

     else

      nowTime = new Date();

    var countTime = Math.floor((this.targetTime.getTime() - nowTime.getTime()) / 1000);

    return countTime;

  }

 /** 目標時間を設定します。

  *  @param argTime Dateオブジェクトで指定する目標時間。

  */

  this.setTarget = function(argTime)

  {

    if( !(argTime instanceof Date) )

      return;

    this.targetTime = argTime;

  }

}

function ImageList()

{

  this.imageFile = new Array(10);

 /** 数値をイメージに変換します。

  * @return 設定されたイメージファイルを返します。

  */

  this.getImage = function(ixNum)

  {

    if( this.imageFile[ixNum] == undefined )

      return null;

    return this.imageFile[ixNum];

  }

 /** イメージファイルを設定します。

  * @param ixNum 設定するイメージの数値です。

  * @param numUrl 設定するイメージを表すパスです。

  */

  this.setImage = function(ixNum, numUrl)

  {

    if( !isFinite(ixNum) )

      return;

    this.imageFile[ixNum] = new Image();

    this.imageFile[ixNum].src = numUrl;

  }

}


こんな感じで。

ボディータグ内に以下のようなタグを挿入して。

<span id="counter"></span>

なめらかにカウントするにはChangeImage関数の最後にあるsetTimeoutの第二引数をミリ秒指定でいじればいいです。

次の秒になる時間を計算してやるのが一番いいのかも。

ファイルはご自分で用意してください。フルパスでも相対指定でもいいはずです。

設定時間は  objCD.setTarget(new Date(2006, 3, 16, 9, 29, 59));

今こんなんなってますが、これが2006/4/16 9:29:59という意味です。

このへんいじってください。

http://www.dummy.com

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません