JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの三項演算子を使って現在時刻に応じてオフィスが「営業中」か「閉店中」かを表示する方法

ここでは、現在の日時と営業時間を照合するケースを考えてみましょう。現在の時刻に基づいて、オフィスが今「営業中（Open）」なのか「閉店中（Closed）」なのかを画面に表示したい場面はよくあります。

このような処理は、Dateオブジェクトから現在の「時」を取得し、三項演算子（条件演算子）を使って判定することで、非常にシンプルに実装できます。以下がそのサンプルコードです。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p class="closeOrOpened"></p>
<script>
    const gettingHours = new Date().getHours()
    const actualHours = (gettingHours >= 10 && gettingHours < 18) ? 'Open' : 'Closed';
    document.querySelector('.closeOrOpened').innerHTML = actualHours;
</script>
</body>
</html>

コードの解説

  • new Date().getHours()：現在のローカル時刻から「時」（0〜23の数値）を取得します。
  • (gettingHours >= 10 && gettingHours < 18) ? 'Open' : 'Closed'：時刻が10時以上18時未満であれば'Open'を、それ以外であれば'Closed'を返す三項演算子です。
  • document.querySelector('.closeOrOpened').innerHTML：判定結果をページ上の要素に表示しています。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存し、そのファイルを右クリックします。VS Codeエディターを使用している場合は、「Open with Live Server」を選択してブラウザーで開いてください。

実行結果

上記のプログラムを実行すると、次のような出力が得られます。

Open

この条件では、現在時刻の「時」が10以上18未満の場合に「Open」と表示され、それ以外の場合は「Closed」と表示されます。たとえば、午前10時前や午後6時以降に実行した場合には、条件がfalseとなるため「Closed」という出力结果になります。

JavaScriptの三項演算子を使って現在時刻に応じてオフィスが「営業中」か「閉店中」かを表示する方法

  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. JavaScriptで関数の実行結果をHTMLとして表示する方法

    関数の結果をHTMLとして表示するには？JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。サンプルコード以下は、ページ内にあるテキストボックス（input type=text）の数をカウントし、その結果をHTMLとして表示するコード例です。<!DOCTYPE h