« 九州大学・新キャンパス 公募情報 | トップページ | ロケットの延期を望む者? »

2005年2月 8日 (火曜日)

カウントダウン JavaScript

H-IIA 7号機 打上まであと
卒業論文提出まであと

ソースです。(通常は、functionはHEAD部に記述します)

<form name="form1">
  H-IIA 7号機 打上まであと<br>
  <input name="myText" type="text" size="25" style="text-align:right;" readonly>
  </input>
</form>
<form name="form2">
  卒業論文提出まであと<br>
  <input name="myText" type="text" size="25" style="text-align:right;" readonly>
  </input>
</form>
<script language="JavaScript">
<!--
function myCountDown(cdObj, xDay){
  cdX = xDay.getTime()-(new Date()).getTime();
  if (cdX < 0) {cdSign = "-"; cdX = -cdX;} else {cdSign = "";}
  (cdSec = Math.floor(cdX /= 1000) % 60) < 10 && (cdSec = "0"+cdSec);
  (cdMin = Math.floor(cdX /= 60) % 60) < 10 && (cdMin = "0"+cdMin);
  (cdHour = Math.floor(cdX /= 60) % 24) < 10 && (cdHour = "0"+cdHour);
  cdDay = Math.floor(cdX / 24);
  cdObj.value = cdSign+cdDay+"日"+cdHour+"時間"+cdMin+"分"+cdSec+"秒";
}
setInterval(
  "myCountDown(document.form1.myText, new Date(2005,2-1,26,18,25,0));"+
  "myCountDown(document.form2.myText, new Date(2005,2-1,23,17,0,0));",1000);
//-->
</script>

複数イベントの同時カウントダウンにも対応するよう、関数を作ってみました。演算子を凝った使い方しているので、読みにくいかも。関数を呼び出すときは、setInterval(" ")の中に複数のスケジュールを並べて記述します。例としてH-IIAロケットの打上と、学生の論文の提出日にしてみました。
それぞれの期日をDateオブジェクトで渡します。月だけは-1するのを忘れないように。
表示する場所もオブジェクトで渡しているので、テキストフィールドに限らずボタン等にも表示できます。

現在、研究室の学生共用パソコンで、これを記述したHTMLファイルをローカルに保存し、アクティブデスクトップ項目として表示させています。

参考「とほほのWWW入門

-----
修正2/14
期日経過後のマイナス表示にバグがあったので、修正しました。
-----
修正7/1
設定時刻を、当初予定の17:09から、実際に打ち上げた18:25に変更しました。
今もマイナス表示で、打ち上げからの経過時間を刻み続けています。

|

« 九州大学・新キャンパス 公募情報 | トップページ | ロケットの延期を望む者? »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/23831/2852012

この記事へのトラックバック一覧です: カウントダウン JavaScript:

» JavaScriptの演算子 [ネットビジネス用CGI Perl HTML Javascriptの情報サイト]
  今回から数回に分けて、JavaScriptで使用する演算子について書いていきます。 JavaScriptで使用される演算子は、CGI、PerlやC言語によく似ています。 JavaScriptの演算子は、VisualBasicなど他の言語を使用されていた方には使用したことがない演算子も出てくるので、覚えておくとよいでしょう。 また、プログラムを書いた事が無いという方のために、簡単な例を用意しました。 a = b + c... [続きを読む]

受信: 2006年3月19日 (日曜日) 12:53

« 九州大学・新キャンパス 公募情報 | トップページ | ロケットの延期を望む者? »