Date().toLocaleString()

JavaScriptのDate().toLocaleString()で現在時刻を取得して要素に追加

2022年8月28日 5分

JavaScriptの .addEventListener のクリックトリガーと、Date().toLocaleString() の日時取得をして、最後に指定したブロックに要素を追加します。

スニペット自体は単独で使うことはなく、ユーザーの操作に日時をセットにして返していきます。

Date().toLocaleString()
現在時刻を取得して要素に追加するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

Date().toLocaleString()

JavaScriptの Date().toLocaleString() は、「言語に合わせた日時」の文字列を返すメソッドです。

let posttime = new Date().toLocaleString();

構文は dateObj.toLocaleString([locales[, options]]) で、locales と options の引数により、アプリケーションは使用される書式変換の言語の指定や、関数の振る舞いのカスタマイズをすることができるみたいです。

参考Date.prototype.toLocaleString() – JavaScript | MDNnull

かかかず

タイムゾーンは、ローカルの環境で設定されているタイムゾーンが使用されます。

この記事では、Date().toLocaleString() で取得した文字列を要素にして挿入します。

現在時刻を取得して要素に追加するサンプル

早速サンプルです。

ブロックの下部に「現在時刻を取得」のボタンがあります。このボタンをクリックすると、クリックした日時の要素がボタンをクリックする度に表示されます。

クリックする度にブロック下部に要素が追加されていき、一番新しく追加された要素には日時とセットで「NEW」のアイコンが表示されます。

かかかず

要素を追加する度に、スクロールも下方向に追従して表示します。

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説していきます。

HTMLを記述

まずはじめに、設置したい表示したい場所へコードを記述します。

コードを表示

<ul id="timeList"></ul>

<button id="createBtn">現在時刻を取得</btn>

JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

const timelist = document.getElementById('timeList');
document.getElementById('createBtn').addEventListener('click', () => {
  let item = document.createElement("li");
  // 現在時刻を取得
  let posttime = new Date().toLocaleString(); 
  // 現在時刻をHTMLに挿入
  item.innerHTML = '<time>' + posttime + '</time>';
  // ulタグに追加
  timelist.appendChild(item);
  // 下に追加してスクロールを最下部で追従
  timelist.scrollTo(0, timelist.scrollHeight);
});

CSSを記述

最後にCSSを記述して、見た目を整えます。

コードを表示

ul#timeList {
    border: none;
    height: 300px;
    overflow-y: scroll;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul#timeList li {
    padding: 0;
    background: #eee;
    animation: fadeIn 0.7s ease 0s 1 normal;
}
ul#timeList li:last-child {
    background: #efdb3f;
}
ul#timeList li time {
    color: #555;
    display: block;
    padding: 8px 18px;
}
ul#timeList li:last-child time:after {
    content: "NEW";
    background: #707070;
    color: #FFF;
    font-size: 0.8rem;
    vertical-align: 2px;
    padding: 1px 10px;
    margin-left: 7px;
    border-radius: 9999px;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(-30px);
  }
     100% {
     opacity: 1;
  }
}

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。HTMLは「要素を追加するオブジェクトとボタン」。JavaScriptは「イベントで要素を追加」と、CSSはレイアウトと見た目を整える内容です。

順に解説していきます。

HTML

HTMLは、idが「timeList」のついた ul タグとボタンの2つです。

<ul id="timeList"></ul>

<button id="createBtn">現在時刻を取得</btn>

後述のJavaScriptのコードでボタンクリック毎に li タグを、このul タグに挿入していきます。

JavaScript

JavaScriptは、はじめにid名「timeList」の ul タグを取得して、.addEventListener の中に処理内容を書いていきます。

全体の各コードの流れと詳細はコメントアウトに記載した通りですが、はじめに li タグを作り、現在時刻を取得して ul タグの中へ要素を追加していきます。

const timelist = document.getElementById('timeList');
document.getElementById('createBtn').addEventListener('click', () => {
  let item = document.createElement("li");
  // 現在時刻を取得
  let posttime = new Date().toLocaleString(); 
  // 現在時刻をHTMLに挿入
  item.innerHTML = '<time>' + posttime + '</time>';
  // ulタグに追加
  timelist.appendChild(item);
  // 下に追加してスクロールを最下部で追従
  timelist.scrollTo(0, timelist.scrollHeight);
});

一番最後の行にある timelist.scrollTo(0, timelist.scrollHeight); は、この一文で要素を下に追加していく時にスクロールを追従させていきます。逆に、これがないとスクロールが追従せず、挿入された要素が枠外に見切れていってしまうので、このスニペットでは重要なコードになります。

CSS

「timeList」のid名が付く ul タグには overflow-y: scroll; と height: 300px; をセットで記述して、挿入する要素が沢山増えても、ブロック自体が伸びて行かないようにしています。

ul#timeList {
    border: none;
    height: 300px;
    overflow-y: scroll;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul#timeList li {
    padding: 0;
    background: #eee;
    animation: fadeIn 0.7s ease 0s 1 normal;
}
ul#timeList li:last-child {
    background: #efdb3f;
}
ul#timeList li time {
    color: #555;
    display: block;
    padding: 8px 18px;
}
ul#timeList li:last-child time:after {
    content: "NEW";
    background: #707070;
    color: #FFF;
    font-size: 0.8rem;
    vertical-align: 2px;
    padding: 1px 10px;
    margin-left: 7px;
    border-radius: 9999px;
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(-30px);
  }
     100% {
     opacity: 1;
  }
}

fadeIn のアニメーションを @keyframes で作り、ボタンクリックで挿入される li タグに当てて、表示される際に上から下に落ちてくるアニメーションで表示させます。