質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

JavaScript 時間帯による切替

akiko0105
akiko0105

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

0クリップ

230閲覧

投稿2022/12/04 06:38

編集2022/12/04 21:50

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>

<button onclick>挨拶</button>

</body> </html>

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/12/05 00:08

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

luuguas

2022/12/04 06:54

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

回答2

0

ベストアンサー

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

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

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

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

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>

投稿2022/12/04 07:14

m0605

総合スコア14

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

akiko0105

2022/12/04 07:37

myTimeで取得した現在時刻から 4:00〜9:00は『おはようございます』 9:01〜13:00は『こんにちは』といった 形で 時間によって切り替えたいです。 説明が足りず申し訳ありません。
m0605

2022/12/04 09:11

なるほど,ちなみに関数myTimeの戻り値はなんですか? ソースコードを載せてもらえると助かります.
akiko0105

2022/12/04 11:39

<!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> <button onclick>挨拶</button> </body> </html> こんな感じで 現在の日付と時刻を表示して その下にアラートを作動させる『挨拶』というボタンを表示したいです。 <button onclick>挨拶</button>の部分が不完全な上、ここに当てはめる functionに行き詰まっています。
yambejp

2022/12/05 00:15

通常くぎりは9:00=9:01ではなく8:59:59-9:00:00ですよね
akiko0105

2022/12/05 01:33

区切りは 4:00:00〜8:59:59 『おはようございます』 9:00:00〜16:59:59 『こんにちは』 17:00:00〜21:59:59 『こんばんは』 22:00:00〜3:59:59『おやすみなさい』 の4段階表示にしたいです。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。