[スクリプトの概要]
地球の寿命を人間の寿命に換算したとき、あなたが生まれてから何秒かを計算するスクリプト

  1. //=============================================================================
  2. //
  3. // GkEarthCalender.js JAVAScript Earth Calender 地球の寿命を人間の寿命に換算したとき、あなたが生まれてから何秒?
  4. //            Programmed by G.K.2018
  5. //
  6. //=============================================================================
  7. //変数の宣言===================================================================
  8. var canvas; //キャンバスオブジェクト
  9. var ctx; //描画コンテキスト
  10. var winWidth = 600; //CANVASの横幅
  11. var winHeight = 350; //CANVASの高さ
  12. var now_year; // 現在の年月日 数値
  13. var now_mon;
  14. var now_days;
  15. var now_date; // 2018/06/30形式の現在の日付
  16. var base_date; // 誕生日日付
  17. var m_diffDays = 0; // 日付差分
  18. var img_back = new Image(); //画像オブジェクト(背景)
  19. var m_daymsec = 86400000; //1日をミリ秒に換算
  20. //関数の宣言========================================================================
  21. //初期化:年選択のオプション追加-------------------------------
  22. function initSelect_Year() {
  23. // 現在の年を取得
  24. var now = new Date();
  25. now_year = now.getYear() + 1900;
  26. now_mon = now.getMonth();
  27. now_days = now.getDate();
  28. // 年入力ボックスのメニュー項目のセット-----
  29. var selectId = document.form1.bdYear;
  30. for (var i = now_year-100; i < now_year+1; i++)
  31. {
  32. element = document.createElement('option');
  33. element.setAttribute('value', i);
  34. element.innerHTML = i;
  35. selectId.appendChild( element );
  36. }
  37. // 現在の年を選択状態にする
  38. selectId.options[100].selected = true;
  39. // 月入力ボックスのメニュー項目のセット-----
  40. selectId = document.form1.bdMonth;
  41. for (var i = 1; i < 12; i++)
  42. {
  43. element = document.createElement('option');
  44. element.setAttribute('value', i);
  45. element.innerHTML = i;
  46. selectId.appendChild( element );
  47. }
  48. // 現在の月を選択状態にする
  49. selectId.options[now_mon].selected = true;
  50. // 日入力ボックスのメニュー項目のセット-----
  51. selectId = document.form1.bdDay;
  52. // メニュー項目のセット
  53. for (var i = 1; i < 32; i++)
  54. {
  55. element = document.createElement('option');
  56. element.setAttribute('value', i);
  57. element.innerHTML = i;
  58. selectId.appendChild( element );
  59. }
  60. // 現在の日を選択状態にする
  61. selectId.options[now_days].selected = true;
  62. }
  63. //初期化処理-------------------------------------------
  64. function init() {
  65. //描画コンテキストの取得
  66. canvas = document.getElementById("mainCanvas");
  67. if ( ! canvas || ! canvas.getContext ) { return false; }
  68. ctx = canvas.getContext('2d');
  69. img_back.src = "back.png";
  70. initSelect_Year(); //年月日選択オプションの初期化
  71. draw_Back();
  72. ctx.font = "24px 'MS Pゴシック'"; //表示フォントの設定
  73. ctx.fillText("生年月日を入力して、計算するボタンを押してね。", 50, 90);
  74. }
  75. //計算実行--------------------------------------------
  76. function execCulc() {
  77. draw_Back();
  78. //誕生日、現在の日付の文字列------------------
  79. var selectId = document.form1.bdYear;
  80. var num = selectId.selectedIndex;
  81. var str_year = selectId.options[num].value;
  82. selectId = document.form1.bdMonth;
  83. num = selectId.selectedIndex;
  84. var str_mon = selectId.options[num].value;
  85. selectId = document.form1.bdDay;
  86. num = selectId.selectedIndex;
  87. var str_days = selectId.options[num].value;
  88. var str_birthday = str_year + "年" + str_mon + "月" + str_days + "日";
  89. var str_nowdate = now_year + "年" + (now_mon + 1) + "月" + (now_days + 1) + "日";
  90. //現在の年月日を作成-------------------------
  91. var now_mon2 = Number(now_mon) + 1;
  92. var now_days2 = Number(now_days) + 1;
  93. now_date = now_year + "/" + now_mon2 + "/" + now_days2;
  94. //誕生日の年月日を作成------------------------
  95. base_date = Number(str_year) + "/" + Number(str_mon) + "/" + Number(str_days);
  96. //経過日数を計算、表示-----------------------
  97. culcDiffDays(); //日付差分を計算
  98. document.getElementById("detaildata").innerHTML = "あなたの誕生日: " + str_birthday + "
  99. 今日は: " + str_nowdate + "
  100. あなたが産まれてから: " + m_diffDays + "日";
  101. //結果の計算、表示----------------------------------
  102. ctx.fillStyle = "blue";
  103. ctx.font = "24px 'MS Pゴシック'"; //表示フォントの設定
  104. var resultValue = culcResult(); //日付差分を計算
  105. ctx.fillStyle = "blue";
  106. ctx.fillText("地球の寿命を人間の寿命に換算すると、", 50, 70);
  107. ctx.fillText("あなたが産まれてからの時間は " + resultValue + "秒だよ。", 50, 100);
  108. ctx.fillStyle = "black";
  109. }
  110. //背景を描画------------------------------------------
  111. function draw_Back() {
  112. ctx.clearRect(0, 0, 600, 400); //画面のクリア
  113. ctx.drawImage(img_back, 0, 0, 600, 300);
  114. }
  115. //日付の差分を計算------------------------------------
  116. function culcDiffDays() {
  117. var Date1 = new Date(now_date);
  118. var Date2 = new Date(base_date);
  119. m_diffDays = Math.ceil((Date1 - Date2) / m_daymsec); //1日は86400000ms
  120. }
  121. //結果の計算------------------------------------------
  122. function culcResult() {
  123. var resultValue = 0; //結果ミリ秒
  124. var temp1 = m_diffDays * m_daymsec; //差分日付をミリ秒に
  125. resultValue1 = Math.ceil(temp1 / 100000000); //これで割る ミリ秒単位
  126. resultValue = resultValue1 / 1000; //秒単位
  127. return resultValue;
  128. }
  129. //最初に実行------------------------------------------
  130. function main(){
  131. init();
  132. //draw();
  133. }
  134.  

[ファイルのダウンロード]
EarthCalender.zip

サンプルを表示
ウィンドウを閉じる
トップに戻る