この使用例は、テキストボックス内に
今使われているあなたのマシンの時計と同じ時間を表示するものと、
このページにアクセスしてからの経過時間を表示するものです。

色で書かれた文字は同色で書かれた同じ名前を使用するということです。
確認をクリックすれば実際の動きを窓で見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

確認


  1. <HTML>
  2. <HEAD>
  3. <TITLE>時間表示</TITLE>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. <!--
  7. //START 現在の時間を手に入れます。
  8. 　　function today(){
  9. 　　　　setTimeout("today()",1000);
  10. 　　　　document.forms[0].elements[0].value=new Date();
  11. 　　}
  12. //END 現在の時間を手に入れます。
  14. //経過時間を手に入れます。
  15. 　　var start=new Date();
  16. 　　function disp(){
  17. 　　　　setTimeout("disp()",1000);
  18. 　　　　var now=new Date();
  19. 　　　　var dt=parseInt((now.getTime()-start.getTime())/1000);
  20. 　　　　document.MyForm.mbox.value=parseInt(dt/60);
  21. 　　　　document.MyForm.sbox.value=dt%60;
  22. 　　}
  23. //経過時間を手に入れます。
  24. //-->
  25. </SCRIPT>
  27. </HEAD>
  29. <BODY>
  31. <!--現在の時間を表示します。-->
  32. <FORM METHOD="POST">
  33. 現在の時間は：
  34. <INPUT SIZE=22 NAME="today">
  35. </FORM>
  36. <SCRIPT LANGUAGE="JavaScript">
  37. <!--
  38. 　　today();
  39. //-->
  40. </SCRIPT>
  41. <!--現在の時間を表示します。-->
  43. <!--経過時間を表示します。-->
  44. <FORM NAME="MyForm">
  45. ロード後の経過時間：
  46. <INPUT TYPE ="text" NAME="mbox" SIZE=2>：
  47. <INPUT TYPE ="text" NAME="sbox" SIZE=2>
  48. </FORM>
  49. <SCRIPT LANGUAGE="JavaScript">
  50. <!--
  51. 　　disp();
  52. //-->
  53. </SCRIPT>
  54. <!--経過時間を表示します。-->
  56. </BODY>
  57. </HTML>

プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

<7-12>
 現在のシステム時間を読み込みます
<14-23>
 ページを読み込んでからの経過時間を手に入れます。
<19>
 経過時間を秒単位で読み込み、それを"dt"に格納します。
<20>
 経過時間は秒単位で読み込まれるため、60で割った
商を経過時間の"分"とします。
<21>
 経過時間は秒単位で読み込まれるため、60で割った
余りを経過時間の"秒"とします。
<31-41>
 現在の時間を表示したいところに記述します。
<34>
 SIZE=XXでテキストボックスの大きさを決めます。
<43-54>
 経過時間を表示したいところに記述します。
<46-47>
 SIZE=XXでテキストボックスの大きさを決めます。


back