JavaScript　時間帯による切替

JavaScriptで
ボタンをクリックすると
時間帯によって違うアラートが
表示されるようにしたいです。

function myTime()として、
現在時刻を自動取得

body内に〈button〉挨拶〈/button〉として
クリックするとアラート表示がされる
ようにしたいのですが

時間帯によってアラートを切り替えるところで
行き詰まっております。

アドバイスを頂けたらありがたいです。

宜しくお願いします。

現在までの状態です。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> p{ font: 20pt "HG丸ｺﾞｼｯｸM-PRO"; color: blue; text-align: center; } </style> <script> function zikko() { document.write("<p>～現在の日付と時刻～</p>"); } function myTime() { var myDate = new Date(); var myYear = myDate.getFullYear(); var myMonth = myDate.getMonth()+1; var myDay = myDate.getDate(); var myDays = myDate.getDay(); var myHour = myDate.getHours(); var myMinutes = myDate.getMinutes(); var mySeconds = myDate.getSeconds(); if (myMonth === 0){ myMonth = "1月" } if (myMonth === 1){ myMonth = "2月" } if (myMonth === 2){ myMonth = "3月" } if (myMonth === 3){ myMonth = "4月" } if (myMonth === 4){ myMonth = "5月" } if (myMonth === 5){ myMonth = "6月" } if (myMonth === 6){ myMonth = "7月" } if (myMonth === 7){ myMonth = "8月" } if (myMonth === 8){ myMonth = "9月" } if (myMonth === 9){ myMonth = "10月" } if (myMonth === 10){ myMonth = "11月" } if (myMonth === 11){ myMonth = "12月" } if (myDays === 0){ myDays = "(日)" } if (myDays === 1){ myDays = "(月)" } if (myDays === 2){ myDays = "(火)" } if (myDays === 3){ myDays = "(水)" } if (myDays === 4){ myDays = "(木)" } if (myDays === 5){ myDays = "(金)" } if (myDays === 6){ myDays = "(土)" } if (myHour < 12){ myHour = "午前" + myHour; } else { myHour = "午後" + (myHour - 12); } document.write("<p>" + myYear + "年" + myMonth + "月" + myDay + "日" + myDays + "<br>" + myHour + "時" + myMinutes + "分" + mySeconds + "秒</p>"); } </script> </head> <body> <script> zikko(); myTime(); </script>

</body> </html>

このように
現在の日付と時刻を表示して
その下にアラートを作動させる『挨拶』というボタンを表示したいです。

<button onclick>挨拶</button>の部分が不完全な上、ここに当てはめる
functionに行き詰まっています。

luuguas

2022/12/04 06:54

コードが無いとどこで行き詰まっているかが分からないので、現時点でのHTMLとJavaScriptのコードも載せてください。

行動規範の内容に同意します

回答2件

ベストアンサー

載せて頂いたソースコードを見て書いてみました．

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <style>
6    p {
7      font: 20pt "HG丸ｺﾞｼｯｸM-PRO";
8      color: blue;
9      text-align: center;
10    }
11  </style>
12  <script>
13    /**
14     * HTMLに書き込む
15     */
16    function zikko() {
17      let dateAndTime = myTime();
18
19      if (dateAndTime.myMonth === 0) { 
20        dateAndTime.myMonth = "1月"
21      } else if (dateAndTime.myMonth === 1) { 
22        dateAndTime.myMonth = "2月"
23      } else if (dateAndTime.myMonth === 2) { 
24        dateAndTime.myMonth = "3月"
25      } else if (dateAndTime.myMonth === 3) { 
26        dateAndTime.myMonth = "4月" 
27      } else if (dateAndTime.myMonth === 4) { 
28        dateAndTime.myMonth = "5月" 
29      } else if (dateAndTime.myMonth === 5) { 
30        dateAndTime.myMonth = "6月" 
31      } else if (dateAndTime.myMonth === 6) { 
32        dateAndTime.myMonth = "7月" 
33      } else if (dateAndTime.myMonth === 7) { 
34        dateAndTime.myMonth = "8月" 
35      } else if (dateAndTime.myMonth === 8) { 
36        dateAndTime.myMonth = "9月" 
37      } else if (dateAndTime.myMonth === 9) { 
38        dateAndTime.myMonth = "10月" 
39      } else if (dateAndTime.myMonth === 10) { 
40        dateAndTime.myMonth = "11月" 
41      } else if (dateAndTime.myMonth === 11) { 
42        dateAndTime.myMonth = "12月" 
43      } 
44
45      if (dateAndTime.myDays === 0) { 
46        dateAndTime.myDays = "(日)" 
47      } else if (dateAndTime.myDays === 1) { 
48        dateAndTime.myDays = "(月)" 
49      } else if (dateAndTime.myDays === 2) {
50        dateAndTime.myDays = "(火)" 
51      } else if (dateAndTime.myDays === 3) {
52        dateAndTime.myDays = "(水)" 
53      } else if (dateAndTime.myDays === 4) { 
54        dateAndTime.myDays = "(木)" 
55      } else if (dateAndTime.myDays === 5) { 
56        dateAndTime.myDays = "(金)" 
57      } else if (dateAndTime.myDays === 6) { 
58        dateAndTime.myDays = "(土)" 
59      } 
60      
61      if (dateAndTime.myHour < 12) { 
62        dateAndTime.myHour = "午前" + dateAndTime.myHour; 
63      } else { 
64        dateAndTime.myHour = "午後" + (dateAndTime.myHour - 12);
65      } 
66
67      document.write("<p>～現在の日付と時刻～</p>");
68      document.write("<p>" + dateAndTime.myYear + "年" + dateAndTime.myMonth + "月" + dateAndTime.myDay + "日" + 
69        dateAndTime.myDays + "<br>" + dateAndTime.myHour + "時" + dateAndTime.myMinutes + "分" + dateAndTime.mySeconds + "秒</p>");
70    }
71
72    /**
73     * 現在の日付と時間を連想配列にして返す
74     */
75    function myTime() {
76      var myDate = new Date();
77
78      var myDateAndTime = {
79        myYear: myDate.getFullYear(),
80        myMonth: myDate.getMonth() + 1,
81        myDay: myDate.getDate(),
82        myDays: myDate.getDay(),
83        myHour: myDate.getHours(),
84        myMinutes: myDate.getMinutes(),
85        mySeconds: myDate.getSeconds(),
86      };
87
88      return myDateAndTime;
89    }
90
91    /**
92     * ここにアラートを表示する関数を書く
93     */
94    function runAlert() {
95      var dateAndTime = myTime();
96      var myHour = dateAndTime.myHour; // myTimeで取得した時間
97      var myMinutes = dateAndTime.myMinutes;  // myTimeで取得した分
98
99      if(4 <= myHour && myHour < 9) {
100        alert('おはようございます');
101      } else if(9 <= myHour && myHour < 13) {
102        alert('こんにちは');
103      } else {
104        alert('');
105      }
106    }
107  </script>
108</head>
109<body>
110  <script type="text/javascript">
111    zikko();
112  </script>
113
114  <button onclick="runAlert()">挨拶</button>
115
116</body>
117</html>

変更点は

htmlへの表示は関数”zikko”で行う
関数"myTime"は現在日時の取得のみを行う
アラートを表示する関数"runAlert"の追加

頂いていたご質問

「<button onclick>挨拶</button>の部分が不完全な上、ここに当てはめるfunctionに行き詰まっています。」
は，
button の"onclick"属性にjsの関数を記述する

html
1<button onclick="runAlert()">挨拶</button>

ということで解決できると思います．

投稿2022/12/05 01:59

m0605

総合スコア14

どこで行き詰まっているのかがよく見えてこないのですが，とりあえずサンプルを作ってみました．
時間帯によってアラートを切り替えたいとのことですが，これであってます？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6</head>
7<body>
8  <main role="main">
9    <button id="greeting">挨拶</button>
10  </main>
11
12  <script type="text/javascript">
13    const ALERT_TEXT = {
14      morning: "おはよう",
15      noon: "こんにちは",
16      night: "こんばんは",
17    };
18    function myTime() {
19      let date = new Date();
20      return date.getHours()
21    }
22
23    // ボタンクリックイベント
24    document.getElementById('greeting').addEventListener('click', () => {
25      
26      let hours = myTime(); // 現在時刻取得
27
28      if (4 <= hours && hours < 11) { // 時間帯によって表示を変更
29        alert(ALERT_TEXT.morning);
30      } else if (11 <= hours && hours < 18) {
31        alert(ALERT_TEXT.noon);
32      } else {
33        alert(ALERT_TEXT.night);
34      }
35    });
36  </script>
37</body>
38</html>