ざっと2時間強で腕試しも兼ねて時計を作ってみました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock_default</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="clock">
<div id="date">
<span id="month">1</span>/<span id="day">1</span>
(<span id="dayOfTheWeek">Sun</span>)
</div>
<hr>
<div id="time">
<span id="hour">00</span>
:
<span id="minute">00</span>
<span id = "second">00</span>
</div>
</section>
<script src="code.js"></script>
</body>
</html>
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
#clock {
width: 250px;
margin: 0 auto;
text-align: center;
box-sizing: border-box;
border:2px solid #000;
border-top: 0;
background-color: #fefefe;
border-radius: 0 0 8px 8px;
}
div {
line-height:1.6;
}
#date{
font-size: 40px;
}
#time{
font-size: 60px;
}
#second{
font-size: 20px;
}
"use strict";
(() => {
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const nowDate = [1, 1, "Sun"];
const nowTime = [0, 0, 0];
const UPDATE_INTERVAL = 500;
let runnedRecently = 0;
function getNowDateAndTime() {
const now = new Date();
console.log(`now:${now}`);
updateNowDate(now);
updateNowTime(now);
};
function updateNowDate(now) {
nowDate[0] = now.getMonth() + 1;//Dateでは月は0スタート
nowDate[1] = now.getDate();
nowDate[2] = dayNames[now.getDay()];
for (let i = 0; i < 3; i++) {
console.log(nowDate[i]);
};
};
function updateNowTime(now) {
nowTime[0] = now.getHours();
nowTime[1] = now.getMinutes();
nowTime[2] = now.getSeconds();
for (let i = 0; i < 3; i++) {
console.log(nowTime[i]);
};
};
function applyToHTML() {
const month = document.querySelector("#month");
const day = document.querySelector("#day");
const dayOfTheWeek = document.querySelector("#dayOfTheWeek");
const hour = document.querySelector("#hour");
const minute = document.querySelector("#minute");
const second = document.querySelector("#second");
formatNowTime();//時刻フォーマットはここに挟む（0埋めして2桁に）
month.textContent = nowDate[0];
day.textContent = nowDate[1];
dayOfTheWeek.textContent = nowDate[2];
hour.textContent = nowTime[0];
minute.textContent = nowTime[1];
second.textContent = nowTime[2];
};
function formatNowTime() {
for (let i = 0; i < 3; i++) {
if (nowTime[i] < 10) {
nowTime[i] = "0" + nowTime[i];
};
};
};
/* function calculateNextUpdate() {
const now = Date.now();
const nextUpdate = (now - runnedRecently) % UPDATE_INTERVAL;
runnedRecently = now;
return nextUpdate;
};
更新タイミングが期待通り動作しなかったのでコメントアウト*/
function updateClock() {
getNowDateAndTime();
applyToHTML();
};
setInterval(updateClock,500);
})();
見た目はこんな感じ。
まだまだ粗削りな部分が多いので、適宜修正していきます！