フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【JavaScript】タイマー機能を作ってみよう

今日は簡単なタイマーを作ってみようと思います。

先ずは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>timer</title>
<style></style>
</head>
<body>
<div id="target"></div>
</body>
</html>

ここでは画面表示させるためにid属性をつけたdivタグを用意します。

次にscriptタグを用意します。

<!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>timer</title>
<style></style>
</head>
<body>
<div id="target"></div>
<script>
let timer = () => {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}}`;
};
setInterval(timer, 500);
</script>
</body>
</html>

ここでは500ミリ秒ごとに処理を走らせるプログラムを書いています。

〇〇月〇〇日〇〇秒という形で日付を出したいのでまずは曜日の情報を取得します。

let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();

ここではまずnew Date()で日付や曜日のもととなる情報を抜き出します。

次に時間、分、秒を取り出すメソッドを利用しそれぞれ変数に格納します。

const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}`;

そして文字を出力したい部分の要素を取得し,innnerHTMLで各種変数を出力したい形式で記述します。

<script>
let timer = () => {
let date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
const target = document.getElementById("target");
target.innerHTML = `${hour}時:${min}分:${sec}秒`;
};
setInterval(timer, 500);

最後にsetInterval()で500ミリ秒おきに処理が走るよう設定します。

この時timerというアロー関数でくくり処理をひとまとめにしておきます。

これでコードは完成です。

 

ブラウザで見てみると時間、分、秒がリアルタイムに反映されていると思います。

よろしければ作ってみてくださいね(^^)

ブログ始めました! よろしければ見ていってください! https://t.co/5oZys8GAIq #フロントエンジニア #WEB制作 #WordPress

継続は力なり