JavaScript 仿 Android 时钟主要涉及使用 HTML、CSS 和 JavaScript 来创建一个动态的时钟界面。以下是基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。
HH:MM:SS
格式。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<div class="hand hour" id="hour"></div>
<div class="hand minute" id="minute"></div>
<div class="hand second" id="second"></div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.clock {
width: 200px;
height: 200px;
border-radius: 50%;
background: white;
position: relative;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.hand {
width: 5px;
background: black;
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: 50% 100%;
}
.hour {
height: 50px;
}
.minute {
height: 80px;
}
.second {
height: 90px;
}
function updateClock() {
const now = new Date();
const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();
const secondDegrees = ((seconds / 60) * 360) + 90;
const minuteDegrees = ((minutes / 60) * 360) + ((seconds/60)*6) + 90;
const hourDegrees = ((hours / 12) * 360) + ((minutes/60)*30) + 90;
document.getElementById('second').style.transform = `rotate(${secondDegrees}deg)`;
document.getElementById('minute').style.transform = `rotate(${minuteDegrees}deg)`;
document.getElementById('hour').style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(updateClock, 1000);
updateClock(); // Initial call to set the clock immediately
setInterval
正确设置并且没有被浏览器阻止。setInterval
正确设置并且没有被浏览器阻止。transform-origin
属性。transform-origin
属性。通过以上代码和解释,你应该能够创建一个基本的仿 Android 时钟,并解决常见的实现问题。
没有搜到相关的沙龙