1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JavaScriptで時間を表示する(初学者向け)

Last updated at Posted at 2021-12-30

##はじめに

javascriptで時間を表示するプログラムの作り方です。

##時間を取得するメソッド
まず、今回使用するメソッドを確認しましょう。

項目 メソッド名
getHours( )
getMinutes( )
getSeconds( )

↑の3種類のメソッドを変数の中に入れ込んで時間を取得していきます。

次にHTMLはこのようになっています↓

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="time.js"></script>
</body>

</html>

JavaScriptはこのようになっています↓

javascript

// 現在の時間を表示

//----------------------------------------------------------------------------
//Dateインスタンスを作成すると、現在の時刻を示すDateオブジェクトのインスタンスが作成されます↓
//----------------------------------------------------------------------------
const now = new Date();


const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();

document.write(hours + ':' + minutes + ':' + seconds);


それでは解説していきます。

まず、変数名nowの中に**new Date( )**を代入します。

次に変数名hoursを作ってnow.getHours();を代入します。
変数名minutes
にはnow.getMinutes();を代入し、
変数名seconds
には**now.getSeconds();**を代入します。

最後にdocument.write(hours + ':' + minutes + ':' + seconds);の部分は、
「ドキュメントの中に(時:分:秒)を書き出してくださいね」という指示をしているということです。

そして、このように時間が表示されていて、ブラウザを読み込むたびに変化します↓


スクリーンショット 2021-12-30 16.37.01.png


##おわり

ご覧いただきありがとうございました。

また他の記事でお会いしましょう〜👋

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?