Claude3.5Sonnetでプログラムを生成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アナログ時計</title>
<style>
.clock {
width: 98px;
height: 98px;
border: 3.5px solid #B08968;
border-radius: 50%;
position: relative;
background: #ffffff;
margin-left: 7px;
}
.hand {
position: absolute;
transform-origin: bottom center;
background: #333;
z-index: 2; /* 針を日付の前面に配置 */
}
.hour {
width: 2.8px;
height: 24.5px;
top: 24.5px;
left: 47.6px;
}
.minute {
width: 2.1px;
height: 35px;
top: 14px;
left: 48.3px;
}
.second {
width: 0.7px;
height: 39.9px;
top: 9.1px;
left: 49px;
background: #f00;
}
.center {
width: 5.6px;
height: 5.6px;
background: #333;
border-radius: 50%;
position: absolute;
top: 46.2px;
left: 46.2px;
z-index: 3; /* 中心点を最前面に配置 */
}
.number {
position: absolute;
font-size: 11px;
font-weight: normal;
font-family: Arial, sans-serif;
color: #333;
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
}
.date {
position: absolute;
font-size: 10px;
font-weight: bold;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #000000;
width: 34px;
text-align: center;
bottom: 26px;
left: 32px;
padding: 1px 0;
border-radius: 3px;
z-index: 1; /* 日付を針の背面に配置 */
}
</style>
</head>
<body>
<div class="clock">
<div class="date"></div>
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="center"></div>
</div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const milliseconds = now.getMilliseconds();
const hourDeg = (hours + minutes / 60) * 30;
const minuteDeg = (minutes + seconds / 60) * 6;
const secondDeg = (seconds + milliseconds / 1000) * 6;
document.querySelector('.hour').style.transform = `rotate(${hourDeg}deg)`;
document.querySelector('.minute').style.transform = `rotate(${minuteDeg}deg)`;
document.querySelector('.second').style.transform = `rotate(${secondDeg}deg)`;
// 日付を更新（月/日の形式）
const month = now.getMonth() + 1;
const date = now.getDate();
document.querySelector('.date').textContent = `${month} / ${date}`;
}
function addNumbers() {
const clock = document.querySelector('.clock');
const radius = 39;
const centerX = 49;
const centerY = 49;
for (let i = 1; i <= 12; i++) {
const number = document.createElement('div');
number.className = 'number';
number.textContent = i;
const angle = (i - 3) * (Math.PI / 6);
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
number.style.left = `${x - 7}px`;
number.style.top = `${y - 7}px`;
clock.appendChild(number);
}
}
setInterval(updateClock, 50);
addNumbers();
</script>
</body>
</html>