Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript

JavaScriptで現在時刻をhhmmss形式で取得する方法

投稿日:2021年3月28日 更新日:

<目次>

(1) JavaScriptで現在時刻をhhmmss形式で取得する方法
 (1-1) 構文・要点
 (1-2) サンプルプログラム

(1) JavaScriptで現在時刻をhhmmss形式で取得する方法

(1-1) 構文

JavaScriptのDateオブジェクトを使うと、現在のh(時)、m(分)、s(秒)、ms(ミリ秒)などを取得する事ができます。それらの結果を連結する事で「hh:mm:ss:ms」の形式で時刻を表現する事ができます。

■現在のh(時)/m(分)/s(秒)/ms(ミリ秒)の取得

DateオブジェクトのgetXXXメソッドで取得できます。
(表)

メソッド 取得情報
getHours() h(時)
getMinutes() m(分)
getSeconds() s(秒)
getMilliseconds() ms(ミリ秒)

■整形(1桁の場合、先頭に0を付与)

上記のメソッドで取得した時刻は、1桁の場合は先頭に0が表示されないため、自分で補う必要があります。下記はその整形処理を行う簡単なメソッドです。
 
(1桁時に先頭0埋めするメソッド)
function formatTime(i) {
          /* 1桁の場合 */
          if (i < 10) {
            /* 先頭を0埋め */
            i = "0" + i;
          }
          return i;
        }

 

■最終結果の作成(文字列結合)

各情報(時、分、秒、ミリ秒)が出そろったら、それらを連結して「hh:mm:ss:ms」の形式にし、それをfunctionの戻り値として返却します。
 
function startTime() {
          /* ### h(時)、m(分)、s(秒)、ms(ミリ秒)の取得処理 ### */
          return h + ":" + m + ":" + s + ":" + ms;
        }

 

目次にもどる

(1-2) サンプルプログラム

今回はJavaScriptの時刻出力の動作を、簡単な画面(JSP)を使って確認する例をご紹介します。

JSP画面にはGoogleMap等が埋め込まれており、この画面の描画処理の開始(START)の「時刻」を、今回ご紹介した方法で「hh:mm:ss:ms」形式で取得し、それをコンソールに表示するプログラムになります。
 
(図131)

■JavaScript

formatTimeメソッドが1桁の場合の先頭0埋め処理で、startTimeメソッドが「hh:mm:ss:ms」の取得処理です。
 
function formatTime(i) {
          /* 1桁の場合 */
          if (i < 10) {
            /* 先頭を0埋め */
            i = "0" + i;
          }
          return i;
        }
function startTime() {
          var d = new Date();
          // h(時),m(分),s(秒)は10以下の数字は先頭に0を付与
          var h = formatTime(d.getHours());
          var m = formatTime(d.getMinutes());
          var s = formatTime(d.getSeconds());
          var ms = d.getMilliseconds();

          return h + ":" + m + ":" + s + ":" + ms;
        }

(図132)

■JSP

JSPの中にもJavaScriptを埋め込んでおり、<script></script>内で「開始時刻」の表示処理を行っています。「開始時刻」の取得に使用している「startTime()」メソッドが、先ほどのJavaScriptファイル内の時刻取得メソッドになります。「終了時刻」の取得に使っている「$(document).ready()」については別記事(⇒jQueryの「$(document).ready()」について)でご紹介しています)。

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src='js/IT0998_js_hhmmss.js' type='text/javascript' language='javascript' charset='utf-8'></script>
    <script>
    /* (1)documentロード「開始」時刻をコンソールに出力 */
    console.log(startTime()+": ## document load START");
    /* (2)documentの表示準備ができたら、ready内のfunction(){}を実行 */
    $( document ).ready(function() {
        /* (3)documentロード「終了」時刻をコンソールに出力 */
        console.log(startTime()+": ## document load FINISH");
    });
    </script>
</head>
<body>
        (1) Load "tennis-database.com"<br /><br />
    <iframe src="https://tennis-database.com" width="600" height="100"></iframe><br /><br />
        (2) Load some Google Map<br /><br />
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d282714.5956249621!2d-157.83519735607007!3d21.40608556168899!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7bffdb064f79e005%3A0x4b7782d274cc8628!2z44Ki44Oh44Oq44Kr5ZCI6KGG5Zu9IOODj-ODr-OCpOW3ng!5e0!3m2!1sja!2sjp!4v1612401060798!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
    </iframe>
<br />
</body>
</html>

(図133)

■サンプルプログラム実行結果

コンソールに「[hh:mm:ss:ms] ## document load START」と表示されている事が確認できます。
(図134)

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScriptで外部ファイル(.js)を呼び出す方法+JSPでのサンプルプログラムも紹介

<目次> (1) JavaScriptで外部ファイル(.js)を呼び出す方法  (1-1) 構文  (1-2) 外部JavaScriptファイル呼び出し手順   (1-2-1) 外部JavaScrip …

jQueryのget()メソッドの使い方やパラメーターについて

<目次> (1) jQueryのget()メソッドの使い方やパラメーターについて  (1-1) get()メソッドの概要  (1-2) get()メソッドのサンプルプログラム (1) jQueryのg …

JavaScriptでラジオボタンで選択された値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでラジオボタンで選択された値を取得する方法 (2) パターン1:formタグ内部のラジオボタン  (2-1) 単一選択肢  (2-2) 複数選択肢 (3) パター …

JavaScriptでAttributeの値を削除(Remove)する方法

<目次> (1) JavaScriptでAttributeの値を削除(Remove)する方法  (1-1) 構文  (1-2) サンプルプログラム   (1-2-1) サンプルプログラムの概要   ( …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

  • English (United States)
  • 日本語
Top