フォームにアナログ時計を組み込もうと、コードを作成いたしました。
組み込み自体はうまくいったのですが、なぜかアナログの時間表示がうまくいきません。
15時なのに、19時表示になります。
生成AIにもコードを修正してもらい、何度も試しているのですがそれでもうまくいかず。
どこを修正すればよいか、ご意見いただけないでしょうか。
(function() {
// 一定間隔で時計の初期化を試みる
let initAttempt = 0;
const maxAttempts = 20;
function initClock() {
initAttempt++;
console.log(`時計初期化を試行: ${initAttempt}回目`);
// 対象要素を見つける
const targetElement = document.querySelector('[data-field-code="clock"]');
if (!targetElement) {
if (initAttempt < maxAttempts) {
// まだ見つからない場合は0.5秒後に再試行
setTimeout(initClock, 500);
} else {
console.error('時計を配置する要素が見つかりませんでした。');
}
return;
}
// 既存の時計がある場合は削除
const existingClock = document.getElementById('simple-analog-clock');
if (existingClock) {
existingClock.remove();
}
// 時計のコンテナを作成
const clockContainer = document.createElement('div');
clockContainer.id = 'simple-analog-clock';
clockContainer.style.display = 'flex';
clockContainer.style.flexDirection = 'column';
clockContainer.style.alignItems = 'center';
clockContainer.style.width = '100%';
clockContainer.style.margin = '10px 0';
// 時計の外枠を作成
const clockFace = document.createElement('div');
clockFace.style.position = 'relative';
clockFace.style.width = '300px';
clockFace.style.height = '300px';
clockFace.style.borderRadius = '50%';
clockFace.style.backgroundColor = '#fff';
clockFace.style.boxShadow = '0 0 10px rgba(0,0,0,0.2)';
clockFace.style.marginBottom = '20px';
// 時計の文字盤を作成
for (let i = 1; i <= 12; i++) {
const number = document.createElement('div');
number.style.position = 'absolute';
number.style.fontSize = '20px';
number.style.fontWeight = 'bold';
number.style.color = '#333';
number.style.width = '30px';
number.style.height = '30px';
number.style.textAlign = 'center';
number.style.lineHeight = '30px';
number.textContent = i;
// 数字の位置を計算（12時の位置から時計回りに配置）
const angle = (i * 30 - 90) * (Math.PI / 180);
const radius = 120; // 文字盤の半径
const centerX = 150; // 中心のX座標
const centerY = 150; // 中心のY座標
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
number.style.left = `${x - 15}px`; // 要素の幅の半分を引く
number.style.top = `${y - 15}px`; // 要素の高さの半分を引く
clockFace.appendChild(number);
}
// 時針を作成
const hourHand = document.createElement('div');
hourHand.id = 'hour-hand';
hourHand.style.position = 'absolute';
hourHand.style.width = '80px';
hourHand.style.height = '6px';
hourHand.style.backgroundColor = '#333';
hourHand.style.top = '150px'; // 中心Y座標
hourHand.style.left = '150px'; // 中心X座標
hourHand.style.transformOrigin = '0 3px'; // 左端、中央を基点に
hourHand.style.zIndex = '7';
clockFace.appendChild(hourHand);
// 分針を作成
const minuteHand = document.createElement('div');
minuteHand.id = 'minute-hand';
minuteHand.style.position = 'absolute';
minuteHand.style.width = '120px';
minuteHand.style.height = '4px';
minuteHand.style.backgroundColor = '#666';
minuteHand.style.top = '150px';
minuteHand.style.left = '150px';
minuteHand.style.transformOrigin = '0 2px';
minuteHand.style.zIndex = '8';
clockFace.appendChild(minuteHand);
// 秒針を作成
const secondHand = document.createElement('div');
secondHand.id = 'second-hand';
secondHand.style.position = 'absolute';
secondHand.style.width = '140px';
secondHand.style.height = '2px';
secondHand.style.backgroundColor = '#c00';
secondHand.style.top = '150px';
secondHand.style.left = '150px';
secondHand.style.transformOrigin = '0 1px';
secondHand.style.zIndex = '9';
clockFace.appendChild(secondHand);
// 中心点を作成
const centerDot = document.createElement('div');
centerDot.style.position = 'absolute';
centerDot.style.width = '12px';
centerDot.style.height = '12px';
centerDot.style.backgroundColor = '#333';
centerDot.style.borderRadius = '50%';
centerDot.style.top = '144px'; // 中心Y座標 - 要素の高さの半分
centerDot.style.left = '144px'; // 中心X座標 - 要素の幅の半分
centerDot.style.zIndex = '10';
clockFace.appendChild(centerDot);
// 日付表示を作成
const dateDisplay = document.createElement('div');
dateDisplay.id = 'date-display';
dateDisplay.style.fontSize = '18px';
dateDisplay.style.fontWeight = 'bold';
dateDisplay.style.color = '#333';
dateDisplay.style.textAlign = 'center';
dateDisplay.style.padding = '10px 20px';
dateDisplay.style.backgroundColor = '#fff';
dateDisplay.style.borderRadius = '10px';
dateDisplay.style.boxShadow = '0 0 5px rgba(0,0,0,0.1)';
// 要素を組み立てる
clockContainer.appendChild(clockFace);
clockContainer.appendChild(dateDisplay);
// 挿入先を決定（できるだけフレキシブルに）
let insertTarget = targetElement;
const flexContainer = targetElement.querySelector('.flex.flex-col.gap-2');
if (flexContainer) {
insertTarget = flexContainer;
}
// 時計をページに追加
insertTarget.appendChild(clockContainer);
// 時計を更新する関数
function updateClock() {
const hourHand = document.getElementById('hour-hand');
const minuteHand = document.getElementById('minute-hand');
const secondHand = document.getElementById('second-hand');
const dateDisplay = document.getElementById('date-display');
if (!hourHand || !minuteHand || !secondHand || !dateDisplay) {
console.error('時計の要素が見つかりません。再初期化します。');
// 再初期化
initAttempt = 0;
initClock();
return;
}
// 現在時刻を取得
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 針の角度を計算
const hourAngle = (hours * 30) + (minutes * 0.5);
const minuteAngle = minutes * 6;
const secondAngle = seconds * 6;
// 針を回転
hourHand.style.transform = `rotate(${hourAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
secondHand.style.transform = `rotate(${secondAngle}deg)`;
// 日付と時刻を表示
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hoursDisplay = String(now.getHours()).padStart(2, '0');
const minutesDisplay = String(minutes).padStart(2, '0');
const secondsDisplay = String(seconds).padStart(2, '0');
dateDisplay.textContent = `${year}年${month}月${day}日 ${hoursDisplay}:${minutesDisplay}:${secondsDisplay}`;
// デバッグ情報
console.log(`現在時刻: ${hours}時${minutes}分${seconds}秒`);
console.log(`針の角度: 時針=${hourAngle}度, 分針=${minuteAngle}度, 秒針=${secondAngle}度`);
}
// 最初の更新
updateClock();
// 1秒ごとに更新
setInterval(updateClock, 1000);
console.log('時計の初期化に成功しました！');
}
// ページロード時に初期化を開始
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initClock);
} else {
// すでにDOMが読み込まれている場合は直接実行
initClock();
}
})();