はじめに
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);の部分は、
「ドキュメントの中に(時:分:秒)を書き出してくださいね」という指示をしているということです。
そして、このように時間が表示されていて、ブラウザを読み込むたびに変化します↓
おわり
ご覧いただきありがとうございました。
また他の記事でお会いしましょう〜👋