css制作闹钟

使用CSS制作闹钟

通过HTML和CSS可以创建一个简单的闹钟界面。以下是实现步骤：

HTML结构

<div class="alarm-clock">
  <div class="face">
    <div class="hour-hand"></div>
    <div class="minute-hand"></div>
    <div class="second-hand"></div>
    <div class="center-dot"></div>
  </div>
  <div class="digital-display">12:00:00</div>
  <div class="controls">
    <button class="set-btn">Set Alarm</button>
  </div>
</div>

CSS样式

.alarm-clock {
  width: 300px;
  margin: 50px auto;
  text-align: center;
}

.face {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 10px solid #333;
  position: relative;
  margin: 0 auto 20px;
}

.hour-hand, .minute-hand, .second-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
}

.hour-hand {
  width: 6px;
  height: 50px;
  background: #333;
  margin-left: -3px;
}

.minute-hand {
  width: 4px;
  height: 70px;
  background: #666;
  margin-left: -2px;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: red;
  margin-left: -1px;
}

.center-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.digital-display {
  font-size: 2rem;
  font-family: monospace;
  margin-bottom: 20px;
}

.controls button {
  padding: 8px 16px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

添加动画效果

要让时钟指针动起来，可以添加CSS动画：

.hour-hand {
  animation: rotate-hour 43200s linear infinite;
}

.minute-hand {
  animation: rotate-minute 3600s linear infinite;
}

.second-hand {
  animation: rotate-second 60s linear infinite;
}

@keyframes rotate-hour {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate-minute {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate-second {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

数字显示更新

需要通过JavaScript来更新数字显示：

function updateDigitalDisplay() {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  document.querySelector('.digital-display').textContent = `${hours}:${minutes}:${seconds}`;
}

setInterval(updateDigitalDisplay, 1000);
updateDigitalDisplay();

闹钟功能实现

添加简单的闹钟设置功能：

document.querySelector('.set-btn').addEventListener('click', function() {
  const alarmTime = prompt('Enter alarm time (HH:MM:SS)');
  if (alarmTime) {
    checkAlarm(alarmTime);
  }
});

function checkAlarm(alarmTime) {
  setInterval(function() {
    const now = new Date();
    const currentTime = now.toTimeString().split(' ')[0];
    if (currentTime === alarmTime) {
      alert('Alarm!');
    }
  }, 1000);
}

这个实现创建了一个模拟时钟和数字时钟的组合界面，包含基本的闹钟功能。可以根据需要进一步自定义样式和功能。