给屏幕加一块手表，酷炫动画效果随心切换！

2023-09-11 14:12:24

时尚大厂出品 HTML+CSS+JS卡西欧手表特效，酷炫动画你也可以拥有！

卡西欧手表一直以来都是时尚界的宠儿，它的经典设计和时尚元素深受人们的喜爱。如果你想在你的屏幕上也拥有一块卡西欧手表，那么这篇教程就是为你准备的。我们将使用HTML、CSS和JavaScript来实现一个交互式卡西欧手表动画效果，让你的屏幕焕然一新。

效果预览

首先，让我们先来看看效果预览。

[图片]

是不是很酷炫？现在，让我们开始制作吧！

HTML结构

首先，我们需要创建一个基本的HTML结构。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="watch">
    <div class="watch-face">
      <div class="watch-hands">
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
      </div>
    </div>
    <div class="watch-controls">
      <button id="start-button">Start</button>
      <button id="stop-button">Stop</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要添加一些CSS样式来美化我们的手表。

/* 手表整体样式 */
#watch {
  width: 250px;
  height: 250px;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
}

/* 手表表盘样式 */
.watch-face {
  width: 200px;
  height: 200px;
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

/* 手表指针样式 */
.watch-hands {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hour-hand {
  width: 10px;
  height: 50px;
  background: black;
  transform-origin: bottom;
}

.minute-hand {
  width: 5px;
  height: 70px;
  background: black;
  transform-origin: bottom;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: red;
  transform-origin: bottom;
}

/* 手表控制按钮样式 */
.watch-controls {
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translate(-50%, 0);
}

#start-button, #stop-button {
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  color: black;
  cursor: pointer;
}

JavaScript代码

最后，我们需要添加一些JavaScript代码来实现手表的功能。

// 获取元素
const watch = document.getElementById('watch');
const watchFace = document.querySelector('.watch-face');
const watchHands = document.querySelector('.watch-hands');
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');

// 定义变量
let isRunning = false;
let intervalID;

// 创建一个函数来更新时间
function updateTime() {
  // 获取当前时间
  const now = new Date();

  // 计算时针、分针和秒针的角度
  const hoursAngle = (now.getHours() % 12) * 30 + (now.getMinutes() / 60) * 30;
  const minutesAngle = now.getMinutes() * 6 + (now.getSeconds() / 60) * 6;
  const secondsAngle = now.getSeconds() * 6;

  // 设置时针、分针和秒针的角度
  hourHand.style.transform = `rotate(${hoursAngle}deg)`;
  minuteHand.style.transform = `rotate(${minutesAngle}deg)`;
  secondHand.style.transform = `rotate(${secondsAngle}deg)`;
}

// 创建一个函数来启动手表
function startWatch() {
  // 设置isRunning为true
  isRunning = true;

  // 调用updateTime函数更新时间
  updateTime();

  // 每秒更新一次时间
  intervalID = setInterval(updateTime, 1000);
}

// 创建一个函数来停止手表
function stopWatch() {
  // 设置isRunning为false
  isRunning = false;

  // 清除定时器
  clearInterval(intervalID);
}

// 添加事件监听器
startButton.addEventListener('click', startWatch);
stopButton.addEventListener('click', stopWatch);

// 默认启动手表
startWatch();