2015年12月4日

森島

【怖くないJavaScript + jQuery】new Date()で日付を動的に書きだしてみる

マークアップ

facebook
twitter

毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。
今日はnew Date()を使用して、日付で遊んでみましょう。

1 日時取得の基本
2 Step1：まず下準備
3 Step2:次にHTMLの準備
4 Step3:jsを書き込む

日時取得の基本

new Date()を使用すると、現在の日付時刻を取得することができます。

new Date();

1	new Date();

始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。
そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。

Step1：まず下準備

まずいつも通りの手順を踏んでいきたいと思います。
headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は date.js とします）を読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="date.js" charset="utf-8"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="date.js" charset="utf-8"></script>

Step2:次にHTMLの準備

今回は、取得した日付を挿入する先があれば大丈夫です。divタグでもpタグでもなんでもいいので、任意のIDを付与したタグを作って下さい。
例では #printDiv としますね。

<div id="printDiv"></div>

1	<div id="printDiv"></div>

Step3:jsを書き込む

読みこんだjsファイル、 date.js に処理を書いていきます。
やりたいことをピックアップして必要な部分だけ記述していって下さいね。

◆この記述は必須

これは基準となる関数なので、冒頭に書いて下さいね。

	var i = new Date();

1	var i = new Date();

◆「年」だけ取り出す

年だけ取り出したい場合はこちら。

	var myYear = i.getFullYear();

1	var myYear = i.getFullYear();

◆「月」だけ取り出す

月だけ取り出したい場合はこちら。

	var myMonth = i.getMonth();

1	var myMonth = i.getMonth();

◆「日」だけ取り出す

日だけ取り出したい場合はこちら。

	var myDate = i.getDate();

1	var myDate = i.getDate();

◆最後に必要な情報をドッキング

「+」を使用すると、取得した値や文字を繋げていくことができます。
例えば「 myYear + ‘年’ + myMonth + ‘月’ 」とすると、「2015年12月」といった風に出力されます。文字を繋げる時は「”」で囲んで下さいね。「月」の代わりに「-」や「/」にしたりもできます。

iから取りだした情報を繋げます。
text()のカッコの中に記述すると、#printDivの中にテキストとして吐き出されます。

$('#printDiv').text( myYear + '年' + myMonth + '月' + myDate '日');

1	$('#printDiv').text( myYear + '年' + myMonth + '月' + myDate '日');

「-」にしたい時はこう。

$('#printDiv').text( myYear + '-' + myMonth + '-' + myDate '-');

1	$('#printDiv').text( myYear + '-' + myMonth + '-' + myDate '-');

例として、年月日を取得したものをフルで置いておきます。

$(function(){
	var i = new Date();
	var myYear = i.getFullYear();
	var myMonth = i.getMonth();
	var myDate = i.getDate();
	
	$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');
});

$(function(){

var i = new Date();

var myYear = i.getFullYear();

var myMonth = i.getMonth();

var myDate = i.getDate();

$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');

});

詳しく説明を入れると、こう

$(function(){
	
	//Dateで今日の日時を取得してiに代入
	var i = new Date();
	
	//iから年だけ取り出す
	var myYear = i.getFullYear();

	//iから月だけ取り出す
	var myMonth = i.getMonth();
	
	//iから日付だけ取り出す
	var myDate = i.getDate();
	
	//printDivに年月日を書き出し
	$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');
	
});

$(function(){

//Dateで今日の日時を取得してiに代入

var i = new Date();

//iから年だけ取り出す

var myYear = i.getFullYear();

//iから月だけ取り出す

var myMonth = i.getMonth();

//iから日付だけ取り出す

var myDate = i.getDate();

//printDivに年月日を書き出し

$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');

});

執筆者：森島[ WEBデザイナー ]

8bit デザイナーです。デザイン・マークアップ・映像制作など幅広く担当しています。

マークアップ

コーポレートサイトのアクセシビリティ、どこまで対応すべき？

コーポレートサイトにおける。重要だと分かっていても、コーポレートサイトにどこまで反映すべきかは悩みどころではないですか？今回は、現実的に取り組みやすい部分と、対応が難しい部分を整理してご紹介します。一概にこれが正解、というわけではありませんが、悩んでいる方の参考になればと思います。目次1 コーポレートサイトでの達成基準は？2 比較的対応しやすい部分2.1 画像に代替テキストを設定する2.2 見出し構造の整理（h1～h6の適切な使用）をする2.3 色や形だけに依存しない […]

2025年9月16日

Webサイト制作

はじめてのShraePoint 実践的活用事例3選【業務効率化・DX】

目次1 SharePointとは？1.1 高い機密性が特長2 SharePointの活用法2.1 1.社内マニュアルや手順書を整備する2.2 2.営業資料や契約書の保管と共有に活用する2.3 3.情報の回覧やアンケート、意見収集の場として活用3 SharePointで作成したポータルサイト4 まとめ5 8bit公式 YouTube Channelのご紹介 SharePointとは？ SharePointはMicrosoftが提供する情報共有サービスです。WordやExcel、 […]

2025年9月10日

Webデザイン

【Premiere Pro】動画素材の音声を自動で文字起こしする方法

Premiere Proの機能を使って、動画素材の音声を自動で文字起こししてみましょう。起こしたテキストは、発話タイミングに合わせて字幕として表示することもできます。とても簡単にできるので、ぜひ試してみてください。目次1 自動文字起こし機能の使い方1.1 1.テキストパネルから文字起こしを行う1.2 2.文字スタイルの変更2 8bit公式 YouTube Channelのご紹介自動文字起こし機能の使い方 1.テキストパネルから文字起こしを行う音声データを含んだ動画をタイ […]