react开发的一个左右无线滚动跑马灯抽奖

要使用 React 开发左右无限滚动跑马灯抽奖功能，可以按照以下步骤进行： ### 1. 创建 React 项目 首先需要创建一个新的 React 项目，可以使用 `create-react-app` 来初始化项目： ```bash npx create-react-app lottery-marquee cd lottery-marquee ``` ### 2. 实现基本的 HTML 结构 在 `App.js` 中创建基本的 HTML 结构，包含跑马灯容器和奖品列表。 ```jsx // App.js import React from 'react'; import './App.css'; const prizes = [ '奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', ]; function App() { return ( <div className="App"> <div className="marquee-container"> {prizes.map((prize, index) => ( <div key={index} className="prize-item"> {prize} </div> ))} </div> <button className="start-button">开始抽奖</button> </div> ); } export default App; ``` ### 3. 实现无限滚动的 CSS 样式 在 `App.css` 中添加样式，实现左右无限滚动的效果。 ```css /* App.css */ .App { text-align: center; padding: 50px; } .marquee-container { display: flex; overflow: hidden; width: 100%; height: 100px; border: 1px solid #ccc; } .prize-item { flex-shrink: 0; width: 200px; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-1200px); /* 6 * 200px */ } } .start-button { margin-top: 20px; padding: 10px 20px; font-size: 18px; cursor: pointer; } ``` ### 4. 实现抽奖逻辑 添加 JavaScript 逻辑来控制滚动和抽奖结果。 ```jsx // App.js import React, { useState, useEffect, useRef } from 'react'; import './App.css'; const prizes = [ '奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', ]; function App() { const [isRunning, setIsRunning] = useState(false); const [winner, setWinner] = useState(''); const marqueeRef = useRef(null); const startLottery = () => { setIsRunning(true); setTimeout(() => { setIsRunning(false); const randomIndex = Math.floor(Math.random() * prizes.length); setWinner(prizes[randomIndex]); }, 5000); }; useEffect(() => { if (isRunning) { marqueeRef.current.style.animationPlayState = 'running'; } else { marqueeRef.current.style.animationPlayState = 'paused'; } }, [isRunning]); return ( <div className="App"> <div className="marquee-container" ref={marqueeRef}> {prizes.map((prize, index) => ( <div key={index} className="prize-item"> {prize} </div> ))} </div> <button className="start-button" onClick={startLottery}> 开始抽奖 </button> {winner && <p className="winner-text">恭喜获得：{winner}</p>} </div> ); } export default App; ``` ### 代码解释 - **HTML 结构**：创建了一个跑马灯容器和奖品列表，以及一个开始抽奖的按钮。 - **CSS 样式**：使用 `animation` 属性实现左右无限滚动的效果。 - **JavaScript 逻辑**： - 使用 `useState` 来管理滚动状态和中奖结果。 - 使用 `useRef` 来引用跑马灯容器，以便控制动画的播放和暂停。 - 点击开始抽奖按钮时，启动滚动动画，并在 5 秒后停止滚动，随机选择一个奖品作为中奖结果。 ### 运行项目 在终端中运行以下命令启动项目： ```bash npm start ``` 打开浏览器，访问 `http://localhost:3000` 即可看到左右无限滚动跑马灯抽奖功能。