当前位置：首页 > React

react实现闹钟滚动

2026-01-27 00:02:11React

实现闹钟滚动功能

在React中实现闹钟滚动效果可以通过CSS动画或JavaScript定时器完成。以下是两种常见方法：

使用CSS动画实现平滑滚动

通过CSS的@keyframes和transform属性创建滚动动画：

import React from 'react';
import './AlarmClock.css';

function AlarmClock() {
  return (
    <div className="clock-container">
      <div className="scrolling-digits">
        {/* 数字内容 */}
      </div>
    </div>
  );
}

对应CSS文件：

.clock-container {
  overflow: hidden;
  height: 60px;
  position: relative;
}

.scrolling-digits {
  animation: scroll 5s linear infinite;
  position: absolute;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

使用React状态控制数字滚动

通过React的useState和useEffect实现更精确的控制：

import React, { useState, useEffect } from 'react';

function AlarmClock() {
  const [currentDigit, setCurrentDigit] = useState(0);
  const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentDigit(prev => (prev + 1) % digits.length);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ overflow: 'hidden', height: '60px' }}>
      <div style={{ transform: `translateY(-${currentDigit * 60}px)` }}>
        {digits.map(digit => (
          <div key={digit} style={{ height: '60px' }}>{digit}</div>
        ))}
      </div>
    </div>
  );
}

实现水平时间滚动效果

对于横向的日期或时间滚动效果：

function HorizontalScroller() {
  const [scrollPosition, setScrollPosition] = useState(0);
  const items = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

  useEffect(() => {
    const interval = setInterval(() => {
      setScrollPosition(prev => (prev + 1) % items.length);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ overflow: 'hidden', width: '100px' }}>
      <div style={{ 
        display: 'flex',
        transform: `translateX(-${scrollPosition * 100}px)`,
        transition: 'transform 0.5s ease'
      }}>
        {items.map(item => (
          <div key={item} style={{ width: '100px' }}>{item}</div>
        ))}
      </div>
    </div>
  );
}

使用第三方库实现高级效果

对于更复杂的滚动需求，可以考虑使用第三方库如react-scroll或framer-motion：

import { motion } from 'framer-motion';

function FramerScroller() {
  return (
    <motion.div
      animate={{ y: -100 }}
      transition={{ 
        duration: 5,
        repeat: Infinity,
        ease: "linear"
      }}
    >
      {/* 滚动内容 */}
    </motion.div>
  );
}

这些方法可以根据具体需求进行调整，通过修改动画持续时间、缓动函数和滚动方向来实现不同的视觉效果。

react实现闹钟滚动