JavaScriptで時計を作成
はじめに
ドットインストール、ProgateでJavascriptの基本を勉強したので、練習、おさらいの為に
時計を作ってみました。備忘録として投稿します。
時計を作成したステップ
1.HTML 日付、時刻部分を作成
2.CSS 背景色、フォントサイズなどを決める
3.JavaScript
Dateオブジェクトを使って現在日時を取得
日時を常に２桁にする
HTMLに日付、時刻を表示される
毎秒ごとに繰り返し処理をさせる
サンプルコード
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>clock</title> <!-- ブラウザのタイトルバーに表示 -->
<link rel="stylesheet" href="./style.css"> <!-- css読み込み -->
<script src="./clock.js"></script> <!-- JavaScript読み込み -->
</head>
<body>
<!-- clock部分-->
<div class="clock_frame">
<!-- date部分-->
<span id="clock_date"></span>
<!-- time部分 -->
<span id="clock_time"></span>
</div>
</body>
</html>
style.css
/* boby要素 */
body{
color:white;
background-color: red;
}
/* id clock_frame*/
div#clock_frame{
width: 100%; /* 横幅をbodyと同じ幅に */
}
/* span要素 */
span{
display: block; /* spanをブロック要素として扱う*/
float: right; /* 右寄せに配置 */
width:80%; /* 横幅を指定*/
font-style: italic; /* フォントスタイル */
}
/* id clock_date */
span#clock_date{
text-align: left; /* テキストを左詰め */
font-size: 40px; /* フォントサイズ*/
}
/* id clock_time*/
span#clock_time{
font-size: 40px; /* フォントサイズ*/
}
clock.js
// clock 関数
function clock() {
// 現在日時を表すインスタンスを取得
let now = new Date();
// 年
let year = now.getFullYear();
// 月 0から11で取得されるので実際の月は+１したものになる
let month = now.getMonth() + 1;
// 日
let date = now.getDate();
// 曜日 0から6で日曜始まりで取得されるので配列のインデックスを指定する
let weeks = new Array("Sun","Mon","Tue","Wed","Thr","Fri","Sat")
let day = weeks[now.getDay()];
// 時
let time = now.getHours();
// 分
let min = now.getMinutes();
// 秒
let sec = now.getSeconds();
// 日付時刻 常に2桁にする処理
if (month < 10) month = "0" + month;
if (date < 10) date = "0" + date;
if (min < 10) min = "0" + min;
if (sec < 10) sec = "0" + sec;
// HTML span clock_date 日付を表示
document.getElementById("clock_date").innerHTML = year + "/" + month + "/" + date + "(" + day + ")";
// HTML span clock_time 時刻を表示
document.getElementById("clock_time").innerHTML = time + ":" + min + ":" + sec;
}
// clock関数を1000ミリ秒（毎秒）に実行する
setInterval(clock,1000);
作成してみて
初めて作成したのがこの時計です。ただ、他の人が作ったサンプルコードを真似する形となってしまいましたが一つ一つ学習した内容を確認しながら出来たのは良かったかなと思います。CSSを勉強していきもう少し見た目がかっこいい時計に改善したいです。