大家好，今天制作一个时钟走动效果！
先看具体效果：
一、以下是一个简单的时钟走动效果的实现，使用了HTML、JavaScript和CSS技术。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时钟</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.clock {
width: 200px;
height: 200px;
border: 8px solid #333;
border-radius: 50%;
position: relative;
padding: 20px;
box-sizing: border-box;
}
.clock .number {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #333;
font-size: 18px;
font-family: Arial, sans-serif;
}
.clock .hand {
position: absolute;
width: 50%;
height: 6px;
background: black;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.4, 2.3, 0.3, 1);
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
<script>
function setClock() {
const currentDate = new Date();
const secondsRatio = currentDate.getSeconds() / 60;
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
setRotation(document.querySelector('.second-hand'), secondsRatio);
setRotation(document.querySelector('.min-hand'), minutesRatio);
setRotation(document.querySelector('.hour-hand'), hoursRatio);
}
function setRotation(element, rotationRatio) {
element.style.transform = `rotate(${rotationRatio * 360}deg)`;
}
setInterval(setClock, 1000);
setClock(); // initial call to set the clock when the page loads
</script>
</body>
</html>
代码解释：
- HTML：定义了一个时钟容器
.clock，里面包含了三个子元素，分别表示时针、分针和秒针。 - CSS：定义了时钟的样式，包括大小、边框、位置等。
.hand类用于定义时钟指针的样式。 - JavaScript：通过
setClock函数获取当前时间，并计算秒针、分针和时针的旋转角度。setRotation函数用于设置每个指针的旋转角度。使用setInterval每秒调用setClock更新时钟。
效果一般般后面又修改了一下：
当然可以，我们可以增加一些额外的功能来使时钟的走动效果更加复杂和有趣。例如，我们可以添加时针、分针和秒针的阴影效果，使它们看起来更加立体。我们还可以添加一个数字时钟显示，以及一个动态的日期显示。
二、下面是一个更加复杂的时钟走动效果的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复杂实时时钟</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.clock {
position: relative;
width: 300px;
height: 300px;
border: 10px solid #333;
border-radius: 50%;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
}
.clock .hand {
position: absolute;
width: 50%;
height: 6px;
background: black;
top: 50%;
transform-origin: 100%;
border-radius: 6px;
box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);
}
.clock .second-hand {
background-color: red;
}
.clock .number {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: #333;
font-size: 24px;
line-height: 300px;
}
.clock-info {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
<div class="number">12</div>
</div>
<div class="clock-info">
<span id="digital-clock"></span>
<div id="date"></div>
</div>
<script>
function updateClock() {
const currentDate = new Date();
const secondsRatio = currentDate.getSeconds() / 60;
const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;
setRotation(document.querySelector('.second-hand'), secondsRatio);
setRotation(document.querySelector('.min-hand'), minutesRatio);
setRotation(document.querySelector('.hour-hand'), hoursRatio);
updateDigitalClock(currentDate);
updateDate(currentDate);
}
function setRotation(element, rotationRatio) {
element.style.transform = `rotate(${rotationRatio * 360}deg)`;
}
function updateDigitalClock(date) {
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
document.getElementById('digital-clock').textContent = `${hours}:${minutes}:${seconds}`;
}
function updateDate(date) {
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const day = days[date.getDay()];
const month = months[date.getMonth()];
const year = date.getFullYear();
document.getElementById('date').textContent = `${day}, ${month} ${date.getDate()}, ${year}`;
}
setInterval(updateClock, 1000);
updateClock(); // initial call to set the clock when the page loads
</script>
</body>
</html>
代码解释：
- HTML：添加了一个数字时钟显示 (
<span id="digital-clock"></span>) 和一个日期显示 (<div id="date"></div>)。 - CSS：增加了
.clock-info类来样式化数字时钟和日期显示。 - JavaScript：
updateClock函数现在同时更新指针、数字时钟和日期。updateDigitalClock函数用于更新数字时钟显示。updateDate函数用于更新日期显示。
源码下载：时钟走动效果
