webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

JavaScript 年日時曜日を取得表示する。

本日は、JavaScriptで、今を基点に、年日時曜日を表示する方法を記載したいと思います。

【前提】

getFullYear():年を取り出す

getMonth():月を取り出す

getDate(): 日を取り出す

getDay(): 曜日を取り出す

getHours():時を取り出す

getMinutes():分を取り出す

getSeconds():秒を取り出す

 

【使用するメソッド】

.toString()  →オブジェクトを文字列として返します。

 

【ポイント】

GMTグリニッジ標準時間 (Greenwich Mean Time)

UTC協定世界時時間(Coordinated Universal Time)原子時計によって決定されている

                                     

1. 現在の日時を取得する。

<表記結果> Tue Apr 21 2014 09:54:40 GMT+0900

→ GMT+0900 は、グリニッジ標準時間に+9時間が日本時間の意味

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>今日の日付</title>
</head>
<body>
<script>
var now;
now = new Date();
document.write('<h1>',now.toString(),'</h1>')
</script>
</body>
</html>

                                     

2. 指定した日時を取得する。(今回取得したい日時:2013年1月11日15:55:55)

<表記結果> Fri Jan 11 2013 15:55:50 GMT+0900

※注意※ 月は0始まり!表記方法→(2013, 0, 11, 15, 55, 50);

 

<表記結果> Fri Jan 11 2013 15:55:50 GMT+0900

→ 先頭の曜日はコンピューターが自動で表記するので、指定はしないでOK。

→ GMT+0900 は、グリニッジ標準時間に+9時間が日本時間の意味

 

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>指定した日付をだす</title>
</head>
<body>
<script>
var aDay;
aDay =  new Date(2013, 0, 11, 15, 55, 50);
document.write('<h1>', aDay.toString(), '</h1>');

<!--document.write('<h1>'+ aDay +'</h1>');でも可-->
</script>
</body>
</html>

                                     

3. 今日の日付を日本語表記する。

<表記結果> 2014年4月21日

※注意※ 月は0始まりなので+1

 

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>本日の日付を取得する</title>
</head>
<body>
<script>
var now,date;
now=new Date();
date = now.getFullYear() + '年'
+(now.getMonth() +1) + '月'
+now.getDate()  + '日';
document.write('<h1>', date, '</h1>');
</script>
</body>
</html>


                                     

4. 上記の日付に加えて、文字も入れる。

<表記結果> 今年は2014年4月21日です。

 

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>今年は2014年4月21日です。</title>
</head>
<body>
<script>
var now,date;
now=new Date();
date = now.getFullYear() + '年'
+(now.getMonth() +1) + '月'
+now.getDate()  + '日';
document.write('<h1> 今年は'+ date+ 'です。</h1>');
</script>
</body>
</html>

                                     

5. 上記を変数で記載する。

<表記結果> 今年は2014年4月22日です。

 

<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>今年は2014年4月21日です。変数使用</title>
</head>
<body>
<script>
var now,date;
now=new Date();
y=now.getFullYear();
mt = now.getMonth() +1;
dt = now.getDate();
document.write('<h1> 今年は'+ y+ '年'+ mt +'月'+dt+ ' 日です。</h1>');
</script>
</body>
</html>

                                     

6. 曜日を日本語表記する。

<表記結果> 今日は火曜日です。

※注意 曜日の表記を日本語でしたいので、曜日の表記方法を記載しますが、日曜は0です。コンピューターには日本語表記の曜日の表示方法がわからないので、('日','月','火','水','木','金','土');で指定してあげます。

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>曜日を日本語で表示する</title>
</head>
<body>
<script>
var days =new Array('日','月','火','水','木','金','土');
<!--→ここでコンピュータに、曜日の表記方法を指定します。-->
<!--→再度注意!)0番は日曜日です。-->

console.log(days);
var date = new Date();
<!--→東京標準時間Dateの後( )がブランクだと、すべてを取得の意味になります。-->

console.log(date);
var day = days[date.getDay()];

<!--曜日だけすり合わせーー>
console.log(day);
document.write('<h1>今日は'+day+'曜日です</h1>');
</script>
</body>
</html>