【浪漫罗盘时钟 Js、css实现（附源代码）美化版本】

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个使用JavaScript和CSS创建类似浪漫罗盘时钟的简单示例。这个示例仅包括基本的时钟功能，没有包括详细的动画和美化。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Casual Clock</title>
<style>
  #clock {
    width: 400px;
    margin: 50px auto;
    padding: 10px;
    border: 4px solid #333;
    border-radius: 50%;
    position: relative;
  }
  #clock::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: #444;
    z-index: -1;
  }
  #clock .hand {
    position: absolute;
    width: 2px;
    height: 200px;
    top: 50%;
    transform-origin: 50% -100px;
  }
  #clock .hour {
    background: #f25f50;
    transform-origin: 50% -100px;
  }
  #clock .minute {
    background: #fff;
  }
  #clock .second {
    background: #f25f50;
  }
</style>
</head>
<body onload="startClock()">
<div id="clock">
  <div class="hand hour"></div>
  <div class="hand minute"></div>
  <div class="hand second"></div>
</div>
 
<script>
function startClock() {
  const secondHand = document.querySelector('.second');
  const minuteHand = document.querySelector('.minute');
  const hourHand = document.querySelector('.hour');
 
  function setDate() {
    const now = new Date();
    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds / 60) * 360) + 90;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
 
    const minutes = now.getMinutes();
    const minutesDegrees = ((minutes / 60) * 360) + ((seconds/60)*6) + 90;
    minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
 
    const hours = now.getHours();
    const hoursDegrees = ((hours / 12) * 360) + ((minutes/60)*30) + 90;
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
  }
 
  setInterval(setDate, 1000);
  setDate();
}
</script>
</body>
</html>

这段代码创建了一个简单的时钟，包括小时、分钟和秒钟指针。它使用CSS创建了一个基本的罗盘背景，并使用JavaScript来计算指针的旋转角度，以显示当前时间。每隔一秒钟指针会更新一次，以显示当前的时间。这个版本没有包括原始版本中的彩虹和文字装饰，但是基本的时钟功能是一样的。

【浪漫罗盘时钟 Js、css实现（附源代码）美化版本】

评论已关闭

推荐阅读