幼儿时钟学习应用设计
一个既有趣又教育性的时钟应用，帮助幼儿认识时间、时针、分针和秒针，以及它们之间的关系。
以下是实现代码（ 由 deepseek 依据人工指令生成）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幼儿时钟学习应用</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', 'Marker Felt', sans-serif;
}
body {
background: linear-gradient(135deg, #ffccd5, #c9e9ff);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #333;
user-select: none;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
color: #ff6b6b;
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 0 #fff;
}
.subtitle {
font-size: 1.2rem;
color: #555;
max-width: 600px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
max-width: 1200px;
width: 100%;
}
.clock-section {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
flex: 1;
min-width: 300px;
max-width: 500px;
}
.clock-face {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #fff9e6;
border: 15px solid #ffcc00;
position: relative;
margin: 20px 0;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.hour-hand, .minute-hand, .second-hand {
position: absolute;
transform-origin: bottom center;
border-radius: 10px;
left: 50%;
bottom: 50%;
transition: none;
}
.hour-hand {
width: 8px;
height: 80px;
background-color: #ff6b6b;
margin-left: -4px;
z-index: 3;
cursor: grab;
}
.minute-hand {
width: 6px;
height: 110px;
background-color: #4d96ff;
margin-left: -3px;
z-index: 2;
cursor: grab;
}
.second-hand {
width: 2px;
height: 130px;
background-color: #ffcc00;
margin-left: -1px;
z-index: 1;
cursor: grab;
}
.center-circle {
position: absolute;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}
.hour-mark {
position: absolute;
width: 4px;
height: 20px;
background-color: #333;
left: 50%;
top: 0;
margin-left: -2px;
transform-origin: 50% 135px;
}
.minute-mark {
position: absolute;
width: 2px;
height: 10px;
background-color: #999;
left: 50%;
top: 0;
margin-left: -1px;
transform-origin: 50% 135px;
}
.hour-text {
position: absolute;
font-size: 24px;
font-weight: bold;
color: #333;
transform: translate(-50%, -50%);
user-select: none;
pointer-events: none;
}
.digital-clock {
font-size: 2.5rem;
font-weight: bold;
color: #ff6b6b;
background-color: #fff;
padding: 15px 30px;
border-radius: 15px;
margin: 20px 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: opacity 0.3s ease;
}
.digital-clock.hidden {
opacity: 0;
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
margin-top: 20px;
}
.time-input-section {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.time-input {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
input[type="number"] {
width: 60px;
padding: 10px;
border: 2px solid #4d96ff;
border-radius: 10px;
font-size: 1.1rem;
text-align: center;
}
button {
color: white;
border: none;
padding: 12px 20px;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
width: 100%;
position: relative;
overflow: hidden;
}
button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
100% {
transform: scale(20, 20);
opacity: 0;
}
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(2px);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.button-row {
display: flex;
gap: 10px;
width: 100%;
}
.quarter-width {
width: 25%;
}
.set-time-btn {
background-color: #FF6B6B;
box-shadow: 0 4px 0 #E74C3C;
}
.set-time-btn:hover {
background-color: #FF8E8E;
}
.show-time-btn {
background-color: #4D96FF;
box-shadow: 0 4px 0 #2D6BC2;
}
.show-time-btn:hover {
background-color: #6AA8FF;
}
.toggle-minute-marks {
background-color: #6C5CE7;
box-shadow: 0 4px 0 #4834D4;
}
.toggle-minute-marks:hover {
background-color: #7D6FF0;
}
.toggle-minute-marks.active {
background-color: #FF9F43;
box-shadow: 0 4px 0 #E67E22;
}
.toggle-minute-marks.active:hover {
background-color: #FFAF60;
}
.toggle-digital-clock {
background-color: #00B894;
box-shadow: 0 4px 0 #009975;
}
.toggle-digital-clock:hover {
background-color: #26C9A8;
}
.toggle-digital-clock.active {
background-color: #FD79A8;
box-shadow: 0 4px 0 #E84393;
}
.toggle-digital-clock.active:hover {
background-color: #FF94BE;
}
.explanation {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
flex: 1;
min-width: 300px;
max-width: 500px;
}
.explanation h2 {
color: #ff6b6b;
margin-bottom: 15px;
text-align: center;
}
.explanation p {
margin-bottom: 15px;
line-height: 1.6;
font-size: 1.1rem;
}
.pointer-info {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.pointer-item {
display: flex;
align-items: center;
gap: 15px;
padding: 10px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
}
.pointer-color {
width: 30px;
height: 8px;
border-radius: 4px;
}
.hour-color {
background-color: #ff6b6b;
}
.minute-color {
background-color: #4d96ff;
}
.second-color {
background-color: #ffcc00;
}
.highlight {
background-color: #ffeb3b;
padding: 3px 6px;
border-radius: 5px;
font-weight: bold;
}
.instructions {
margin-top: 20px;
padding: 15px;
background-color: #e6f7ff;
border-radius: 10px;
border-left: 5px solid #4d96ff;
}
footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.clock-section, .explanation {
width: 100%;
}
.button-row {
flex-wrap: wrap;
}
.quarter-width {
width: 48%;
}
}
</style>
</head>
<body>
<header>
<h1>幼儿时钟学习应用</h1>
<p>帮助小朋友认识时钟，了解时针、分针和秒针的关系</p>
</header>
<div>
<div>
<div id="clock">
<!-- 时钟刻度将通过JavaScript生成 -->
</div>
<div id="digitalClock">
00:00:00
</div>
<div>
<div>
<div>
<input type="number" id="hourInput" min="0" max="23" placeholder="时" value="12">
<span>:</span>
<input type="number" id="minuteInput" min="0" max="59" placeholder="分" value="0">
<span>:</span>
<input type="number" id="secondInput" min="0" max="59" placeholder="秒" value="0">
</div>
</div>
<div>
<button id="setTime" class="set-time-btn quarter-width">设置时间</button>
<button id="showTime" class="show-time-btn quarter-width">显示当前时间</button>
<button id="toggleMinuteMarks" class="toggle-minute-marks quarter-width">显示分钟刻度</button>
<button id="toggleDigitalClock" class="toggle-digital-clock quarter-width">隐藏数字时间</button>
</div>
</div>
</div>
<div>
<h2>时钟小知识</h2>
<p>时钟帮助我们了解一天中的时间。时钟有三根指针：</p>
<div>
<div>
<div class="pointer-color hour-color"></div>
<div>
<strong>时针</strong> - 最短最粗的指针，走得最慢，表示小时
</div>
</div>
<div>
<div class="pointer-color minute-color"></div>
<div>
<strong>分针</strong> - 中等长度的指针，表示分钟
</div>
</div>
<div>
<div class="pointer-color second-color"></div>
<div>
<strong>秒针</strong> - 最长最细的指针，走得最快，表示秒钟
</div>
</div>
</div>
<p>当时针走完一圈（12小时），分针需要走<span>12圈</span>！</p>
<p>当分针走完一圈（60分钟），秒针需要走<span>60圈</span>！</p>
<p>所以，秒针走得最快，时针走得最慢！</p>
<p>试试拖动指针或输入时间，看看时钟的变化！</p>
<div>
<p><strong>小提示：</strong> 你可以拖动时针、分针或秒针来调整时间！</p>
<p><strong>教学建议：</strong> 使用"隐藏数字时间"按钮，让小朋友专注于表盘学习！</p>
</div>
</div>
</div>
<footer>
<p>设计用于帮助幼儿认识时钟和时间概念</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const clock = document.getElementById('clock');
const digitalClock = document.getElementById('digitalClock');
const hourInput = document.getElementById('hourInput');
const minuteInput = document.getElementById('minuteInput');
const secondInput = document.getElementById('secondInput');
const setTimeBtn = document.getElementById('setTime');
const showTimeBtn = document.getElementById('showTime');
const toggleMinuteMarksBtn = document.getElementById('toggleMinuteMarks');
const toggleDigitalClockBtn = document.getElementById('toggleDigitalClock');
let isDragging = false;
let draggedHand = null;
let currentHours = 12;
let currentMinutes = 0;
let currentSeconds = 0;
let autoUpdate = true;
let showMinuteMarks = false;
let showDigitalClock = true;
// 创建时钟刻度
for (let i = 1; i <= 12; i++) {
// 小时刻度 - 包括12点
const hourMark = document.createElement('div');
hourMark.className = 'hour-mark';
hourMark.style.transform = `rotate(${i * 30}deg)`;
clock.appendChild(hourMark);
// 小时数字 - 垂直显示，不旋转
const hourText = document.createElement('div');
hourText.className = 'hour-text';
hourText.textContent = i;
// 计算数字位置
const angle = (i * 30) * Math.PI / 180;
const radius = 100;
const x = 135 + Math.sin(angle) * radius;
const y = 135 - Math.cos(angle) * radius;
hourText.style.left = `${x}px`;
hourText.style.top = `${y}px`;
clock.appendChild(hourText);
}
// 创建分钟刻度
for (let i = 1; i <= 60; i++) {
const minuteMark = document.createElement('div');
minuteMark.className = 'minute-mark';
minuteMark.style.transform = `rotate(${i * 6}deg)`;
minuteMark.style.display = 'none';
clock.appendChild(minuteMark);
}
// 创建指针
const hourHand = document.createElement('div');
hourHand.className = 'hour-hand';
clock.appendChild(hourHand);
const minuteHand = document.createElement('div');
minuteHand.className = 'minute-hand';
clock.appendChild(minuteHand);
const secondHand = document.createElement('div');
secondHand.className = 'second-hand';
clock.appendChild(secondHand);
const centerCircle = document.createElement('div');
centerCircle.className = 'center-circle';
clock.appendChild(centerCircle);
// 更新时钟函数
function updateClock(hours, minutes, seconds) {
// 计算角度
const secondAngle = seconds * 6;
const minuteAngle = minutes * 6 + seconds * 0.1;
const hourAngle = hours * 30 + minutes * 0.5;
// 应用旋转 - 没有过渡效果
secondHand.style.transform = `rotate(${secondAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
hourHand.style.transform = `rotate(${hourAngle}deg)`;
// 更新数字时钟
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
digitalClock.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
// 更新输入框
hourInput.value = hours;
minuteInput.value = minutes;
secondInput.value = seconds;
// 更新当前时间变量
currentHours = hours;
currentMinutes = minutes;
currentSeconds = seconds;
}
// 显示当前时间
function showCurrentTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
updateClock(hours, minutes, seconds);
autoUpdate = true;
}
// 设置自定义时间
function setCustomTime() {
let hours = parseInt(hourInput.value) || 0;
let minutes = parseInt(minuteInput.value) || 0;
let seconds = parseInt(secondInput.value) || 0;
// 验证输入范围
hours = Math.max(0, Math.min(23, hours));
minutes = Math.max(0, Math.min(59, minutes));
seconds = Math.max(0, Math.min(59, seconds));
updateClock(hours, minutes, seconds);
autoUpdate = false;
}
// 切换分钟刻度显示
function toggleMinuteMarks() {
showMinuteMarks = !showMinuteMarks;
const minuteMarks = document.querySelectorAll('.minute-mark');
minuteMarks.forEach(mark => {
mark.style.display = showMinuteMarks ? 'block' : 'none';
});
// 更新按钮文本和样式
toggleMinuteMarksBtn.textContent = showMinuteMarks ? '隐藏分钟刻度' : '显示分钟刻度';
toggleMinuteMarksBtn.classList.toggle('active', showMinuteMarks);
}
// 切换数字时钟显示
function toggleDigitalClock() {
showDigitalClock = !showDigitalClock;
if (showDigitalClock) {
digitalClock.classList.remove('hidden');
toggleDigitalClockBtn.textContent = '隐藏数字时间';
toggleDigitalClockBtn.classList.remove('active');
} else {
digitalClock.classList.add('hidden');
toggleDigitalClockBtn.textContent = '显示数字时间';
toggleDigitalClockBtn.classList.add('active');
}
}
// 计算指针角度
function calculateAngleFromCenter(event) {
const rect = clock.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const mouseX = event.clientX;
const mouseY = event.clientY;
const deltaX = mouseX - centerX;
const deltaY = mouseY - centerY;
// 计算角度（从12点方向开始，顺时针）
let angle = Math.atan2(deltaX, -deltaY) * (180 / Math.PI);
if (angle < 0) angle += 360;
return angle;
}
// 处理鼠标按下事件
function handleMouseDown(event) {
isDragging = true;
// 确定拖动的指针
const angle = calculateAngleFromCenter(event);
// 简单判断：根据角度判断拖动的是哪个指针
draggedHand = 'minute'; // 默认拖动分针
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
// 处理鼠标移动事件
function handleMouseMove(event) {
if (!isDragging) return;
const angle = calculateAngleFromCenter(event);
if (draggedHand === 'hour') {
// 拖动时针
const hours = Math.floor(angle / 30) % 12;
updateClock(hours, currentMinutes, currentSeconds);
} else if (draggedHand === 'minute') {
// 拖动分针
const minutes = Math.floor(angle / 6) % 60;
updateClock(currentHours, minutes, currentSeconds);
} else if (draggedHand === 'second') {
// 拖动秒针
const seconds = Math.floor(angle / 6) % 60;
updateClock(currentHours, currentMinutes, seconds);
}
autoUpdate = false;
}
// 处理鼠标释放事件
function handleMouseUp() {
isDragging = false;
draggedHand = null;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
}
// 初始显示当前时间
showCurrentTime();
// 每秒更新一次（仅在自动更新模式下）
setInterval(function() {
if (autoUpdate) {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 计算角度
const secondAngle = seconds * 6;
const minuteAngle = minutes * 6 + seconds * 0.1;
const hourAngle = hours * 30 + minutes * 0.5;
// 应用旋转 - 没有过渡效果
secondHand.style.transform = `rotate(${secondAngle}deg)`;
minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
hourHand.style.transform = `rotate(${hourAngle}deg)`;
// 更新数字时钟
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(seconds).padStart(2, '0');
digitalClock.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
// 更新输入框
hourInput.value = hours;
minuteInput.value = minutes;
secondInput.value = seconds;
// 更新当前时间变量
currentHours = hours;
currentMinutes = minutes;
currentSeconds = seconds;
}
}, 1000);
// 事件监听
clock.addEventListener('mousedown', handleMouseDown);
setTimeBtn.addEventListener('click', setCustomTime);
showTimeBtn.addEventListener('click', showCurrentTime);
toggleMinuteMarksBtn.addEventListener('click', toggleMinuteMarks);
toggleDigitalClockBtn.addEventListener('click', toggleDigitalClock);
// 为指针添加单独的拖动事件
hourHand.addEventListener('mousedown', (e) => {
e.stopPropagation();
isDragging = true;
draggedHand = 'hour';
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
});
minuteHand.addEventListener('mousedown', (e) => {
e.stopPropagation();
isDragging = true;
draggedHand = 'minute';
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
});
secondHand.addEventListener('mousedown', (e) => {
e.stopPropagation();
isDragging = true;
draggedHand = 'second';
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
});
});
</script>
</body>
</html> 
目录 返回
首页