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のオブジェクト(object)の書き方やメソッドを追加する方法

  <目次> (1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法  (1-1) 構文①:オブジェクト作成  (1-2) 構文②:オブジェクトにアクセス …

JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)

  <目次> (1) JavaScriptでタグを追加する方法(jQueryのtagEditorプラグインを導入)  (1-1) 概要  (1-2) tagEditorの導入方法  (1-3 …

JavaScriptでテキストボックスの値を取得する方法(動画解説付き)

<目次> (1) JavaScriptでテキストボックスの値を取得する方法 (2) 表記例①:document.[Form Name].[Element Id].Value  (2-1) 構文  (2 …

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

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

JavaScriptで別ウィンドウを開くボタンを設置する方法+ウィンドウの大きさ変更方法も併せて紹介

<目次> (1) JavaScriptで別ウィンドウを開くボタンを設置する方法  (1-1) 構文  (1-2) サンプルプログラム  (1-3) 操作動画 (2) 参考:HTMLに直接記述を埋め込む …

  • English (United States)
  • 日本語
Top