digital_clock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>デジタル時計</title>
<style>
#time{
padding: 1em;
font-size: 64px;
font-weight: 900;
font-family: 'Courier New', Courier, monospace;
}
</style>
<script>
let time;
function showTime(){
// 現在日時を取得
let today = new Date();
// 時分秒を取得
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
// 時刻を整形
let mytime = hour + ":" + minute + ":" + second;
// 現在時刻を表示する
time.innerHTML = mytime;
// 再帰呼び出し
setTimeout(showTime, 500);
}
window.addEventListener("load", function(){
time = document.getElementById("time");
showTime();
});
</script>
</head>
<body>
<h1>デジタル時計</h1>
<p id="time"></p>
</body>
</html>
コメント