44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>模拟时钟组件</title>
|
|
<link rel="stylesheet" href="../../assets/css/widgets.css">
|
|
</head>
|
|
<body>
|
|
<div class="widget glass analog-clock-widget">
|
|
<div class="clock-face">
|
|
<div class="clock-hour"></div>
|
|
<div class="clock-minute"></div>
|
|
<div class="clock-second"></div>
|
|
<div class="clock-center"></div>
|
|
</div>
|
|
<div class="clock-label">模拟时钟</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 模拟时钟功能
|
|
function updateAnalogClock() {
|
|
const now = new Date();
|
|
const hours = now.getHours() % 12;
|
|
const minutes = now.getMinutes();
|
|
const seconds = now.getSeconds();
|
|
|
|
// 计算指针角度
|
|
const hourDegrees = (hours * 30) + (minutes * 0.5);
|
|
const minuteDegrees = (minutes * 6) + (seconds * 0.1);
|
|
const secondDegrees = seconds * 6;
|
|
|
|
// 更新指针位置
|
|
document.querySelector('.clock-hour').style.transform = 'translateX(-50%) rotate(' + hourDegrees + 'deg)';
|
|
document.querySelector('.clock-minute').style.transform = 'translateX(-50%) rotate(' + minuteDegrees + 'deg)';
|
|
document.querySelector('.clock-second').style.transform = 'translateX(-50%) rotate(' + secondDegrees + 'deg)';
|
|
}
|
|
|
|
// 初始化时钟并每秒更新
|
|
updateAnalogClock();
|
|
setInterval(updateAnalogClock, 1000);
|
|
</script>
|
|
</body>
|
|
</html> |