设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 萌新训练营 › 萌新交流区 › 简易闹钟。
返回列表 发新帖
查看: 149|回复: 4

[作品展示] 简易闹钟。

[复制链接]
18093037081
发表于 2025-3-31 20:06:22 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
import { useState, useEffect } from "react";
import { AlarmClock, BellRing, CheckCircle2, X } from "lucide-react";

export default function AlarmApp() {
  const [currentTime, setCurrentTime] = useState(new Date());
  const [alarms, setAlarms] = useState([]);
  const [newAlarm, setNewAlarm] = useState({ time: "", label: "" });
  const [isRinging, setIsRinging] = useState(false);

  // 更新当前时间
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
      checkAlarms();
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  // 检查闹钟触发
  const checkAlarms = () => {
    const current = currentTime.toTimeString().substring(0,5);
    const triggered = alarms.some(alarm =>
      alarm.time === current && !alarm.triggered
    );
   
    if (triggered) {
      setIsRinging(true);
      setAlarms(alarms.map(alarm =>
        alarm.time === current ? {...alarm, triggered: true} : alarm
      ));
    }
  };

  // 添加新闹钟
  const addAlarm = () => {
    if (newAlarm.time) {
      setAlarms([...alarms, {
        ...newAlarm,
        id: Date.now(),
        triggered: false
      }]);
      setNewAlarm({ time: "", label: "" });
    }
  };

  // 删除闹钟
  const deleteAlarm = (id) => {
    setAlarms(alarms.filter(alarm => alarm.id !== id));
  };

  // 停止响铃
  const stopAlarm = () => {
    setIsRinging(false);
  };

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      {/* 当前时间显示 */}
      <div className="max-w-md mx-auto bg-white rounded-xl shadow-md p-6 mb-8">
        <div className="flex items-center gap-2 text-blue-600 mb-4">
          <AlarmClock size={28} />
          <h1 className="text-2xl font-bold">
            {currentTime.toLocaleTimeString()}
          </h1>
        </div>

        {/* 新增闹钟表单 */}
        <div className="flex gap-2 mb-6">
          <input
            type="time"
            className="border rounded-lg p-2 flex-1"
            value={newAlarm.time}
            onChange={(e) => setNewAlarm({...newAlarm, time: e.target.value})}
          />
          <input
            type="text"
            placeholder="闹钟名称"
            className="border rounded-lg p-2 flex-1"
            value={newAlarm.label}
            onChange={(e) => setNewAlarm({...newAlarm, label: e.target.value})}
          />
          <button
            onClick={addAlarm}
            className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
          >
            添加
          </button>
        </div>

        {/* 闹钟列表 */}
        <div className="space-y-2">
          {alarms.map((alarm) => (
            <div key={alarm.id} className="flex items-center justify-between bg-gray-50 p-3 rounded-lg">
              <div className="flex items-center gap-3">
                <span className="font-mono text-lg">{alarm.time}</span>
                <span className="text-gray-600">{alarm.label || "闹钟"}</span>
                {alarm.triggered && <CheckCircle2 className="text-green-500" />}
              </div>
              <button
                onClick={() => deleteAlarm(alarm.id)}
                className="text-red-500 hover:text-red-600"
              >
                <X size={20} />
              </button>
            </div>
          ))}
        </div>

        {/* 响铃提示 */}
        {isRinging && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div className="bg-white p-8 rounded-xl text-center">
              <BellRing className="mx-auto mb-4 text-yellow-500" size={48} />
              <h2 className="text-2xl font-bold mb-4">时间到啦！</h2>
              <button
                onClick={stopAlarm}
                className="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600"
              >
                停止响铃

              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC
发表于 2025-3-31 20:10:50 | 显示全部楼层
简易闹钟代码问题分析与修复建议

你提供的这段 React 代码存在多个问题，主要是变量声明不完整、缺少依赖项、以及部分 JSX 写法不规范。下面我将逐一指出并给出修复建议。

1. useState 声明不完整

你有几处 useState 没有正确解构变量名，例如：

const  = useState(new Date());

应该改为：

  1. const [currentTime, setCurrentTime] = useState(new Date());
  2. const [alarms, setAlarms] = useState([]);
  3. const [newAlarm, setNewAlarm] = useState({ time: "", label: "" });
  4. const [isRinging, setIsRinging] = useState(false);
复制代码


2. useEffect 缺少依赖项

useEffect(..., ); 中依赖项为空，应该明确写为：

  1. useEffect(() => {
  2.   const timer = setInterval(() => {
  3.     setCurrentTime(new Date());
  4.     checkAlarms();
  5.   }, 1000);
  6.   return () => clearInterval(timer);
  7. }, [currentTime, alarms]);
复制代码


3. 添加闹钟逻辑不完整

setAlarms(); 中没有传入新数组，应该改为：

  1. setAlarms([...alarms, {
  2.   id: Date.now(),
  3.   time: newAlarm.time,
  4.   label: newAlarm.label,
  5.   triggered: false
  6. }]);
复制代码


4. JSX 中事件处理函数缺失

例如：

onChange={e => setNewAlarm({...newAlarm, time: e.target.value})}

这部分在你提供的代码中被截断了，应该补全为：

  1. <input
  2.   type="time"
  3.   value={newAlarm.time}
  4.   onChange={e => setNewAlarm({...newAlarm, time: e.target.value})}
  5. />
  6. <input
  7.   type="text"
  8.   placeholder="标签"
  9.   value={newAlarm.label}
  10.   onChange={e => setNewAlarm({...newAlarm, label: e.target.value})}
  11. />
  12. <button onClick={addAlarm}>添加</button>
复制代码


5. JSX 中图标组件未正确使用

例如：

{alarm.triggered && }

应该是：

  1. {alarm.triggered && <BellRing className="text-yellow-500" />}
复制代码


6. JSX 结构不完整

你提供的 return 部分 JSX 缺少外层容器，建议用一个 <div>...</div> 包裹所有内容。

总结

  • 补全所有 useState 的变量名
  • 修复 useEffect 的依赖项
  • 完善添加闹钟逻辑
  • 补全 JSX 中的事件处理和组件结构


如果你需要我提供完整修复后的代码，请回复“请给我完整代码”，我会用 [code] 标签格式返回。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

18093037081
 楼主| 发表于 2025-3-31 20:13:46 | 显示全部楼层
FishC 发表于 2025-3-31 20:10
简易闹钟代码问题分析与修复建议

你提供的这段 React 代码存在多个问题，主要是变量声明不完整、缺少依 ...

谢谢了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

FishC
发表于 2025-3-31 20:14:07 | 显示全部楼层
18093037081 发表于 2025-03-31 20:13
FishC 发表于 2025-3-31 20:10
简易闹钟代码问题分析 ...


简易闹钟修复后的完整代码

以下是修复后的 React 简易闹钟应用代码，已补全所有缺失部分，并确保功能完整可运行：

  1. import { useState, useEffect } from "react";
  2. import { AlarmClock, BellRing, CheckCircle2, X } from "lucide-react";

  4. export default function AlarmApp() {
  5.   const [currentTime, setCurrentTime] = useState(new Date());
  6.   const [alarms, setAlarms] = useState([]);
  7.   const [newAlarm, setNewAlarm] = useState({ time: "", label: "" });
  8.   const [isRinging, setIsRinging] = useState(false);

  10.   // 更新当前时间
  11.   useEffect(() => {
  12.     const timer = setInterval(() => {
  13.       setCurrentTime(new Date());
  14.       checkAlarms();
  15.     }, 1000);
  16.     return () => clearInterval(timer);
  17.   }, [currentTime, alarms]);

  19.   // 检查闹钟触发
  20.   const checkAlarms = () => {
  21.     const current = currentTime.toTimeString().substring(0, 5);
  22.     const triggered = alarms.some(
  23.       (alarm) => alarm.time === current && !alarm.triggered
  24.     );

  26.     if (triggered) {
  27.       setIsRinging(true);
  28.       setAlarms(
  29.         alarms.map((alarm) =>
  30.           alarm.time === current ? { ...alarm, triggered: true } : alarm
  31.         )
  32.       );
  33.     }
  34.   };

  36.   // 添加新闹钟
  37.   const addAlarm = () => {
  38.     if (newAlarm.time) {
  39.       const id = Date.now();
  40.       setAlarms([
  41.         ...alarms,
  42.         { id, time: newAlarm.time, label: newAlarm.label, triggered: false },
  43.       ]);
  44.       setNewAlarm({ time: "", label: "" });
  45.     }
  46.   };

  48.   // 删除闹钟
  49.   const deleteAlarm = (id) => {
  50.     setAlarms(alarms.filter((alarm) => alarm.id !== id));
  51.   };

  53.   // 停止响铃
  54.   const stopAlarm = () => {
  55.     setIsRinging(false);
  56.   };

  58.   return (
  59.     <div className="p-4 max-w-md mx-auto">
  60.       {/* 当前时间显示 */}
  61.       <div className="text-center text-2xl font-bold mb-4">
  62.         <AlarmClock className="inline-block mr-2" />
  63.         {currentTime.toLocaleTimeString()}
  64.       </div>

  66.       {/* 新增闹钟表单 */}
  67.       <div className="flex gap-2 mb-4">
  68.         <input
  69.           type="time"
  70.           value={newAlarm.time}
  71.           onChange={(e) =>
  72.             setNewAlarm({ ...newAlarm, time: e.target.value })
  73.           }
  74.           className="border p-1 rounded"
  75.         />
  76.         <input
  77.           type="text"
  78.           placeholder="标签"
  79.           value={newAlarm.label}
  80.           onChange={(e) =>
  81.             setNewAlarm({ ...newAlarm, label: e.target.value })
  82.           }
  83.           className="border p-1 rounded"
  84.         />
  85.         <button
  86.           onClick={addAlarm}
  87.           className="bg-blue-500 text-white px-3 py-1 rounded"
  88.         >
  89.           添加
  90.         </button>
  91.       </div>

  93.       {/* 闹钟列表 */}
  94.       <ul className="space-y-2">
  95.         {alarms.map((alarm) => (
  96.           <li
  97.             key={alarm.id}
  98.             className="flex justify-between items-center border p-2 rounded"
  99.           >
  100.             <div>
  101.               <span className="font-semibold">{alarm.time}</span> -{" "}
  102.               {alarm.label || "闹钟"}
  103.               {alarm.triggered && (
  104.                 <CheckCircle2 className="inline-block text-green-500 ml-2" />
  105.               )}
  106.             </div>
  107.             <button
  108.               onClick={() => deleteAlarm(alarm.id)}
  109.               className="text-red-500 hover:text-red-600"
  110.             >
  111.               <X />
  112.             </button>
  113.           </li>
  114.         ))}
  115.       </ul>

  117.       {/* 响铃提示 */}
  118.       {isRinging && (
  119.         <div className="mt-4 p-4 bg-yellow-100 border border-yellow-400 rounded text-center">
  120.           <BellRing className="inline-block mr-2 text-yellow-600" />
  121.           <span className="font-bold">时间到啦！</span>
  122.           <div>
  123.             <button
  124.               onClick={stopAlarm}
  125.               className="mt-2 bg-red-500 text-white px-3 py-1 rounded"
  126.             >
  127.               停止响铃
  128.             </button>
  129.           </div>
  130.         </div>
  131.       )}
  132.     </div>
  133.   );
  134. }
复制代码


如果你还想添加声音提醒、重复闹钟等功能，也可以继续扩展这个组件。欢迎继续提问！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

某一个“天”
发表于 2025-3-31 20:32:02 | 显示全部楼层
我也做了个计算器和闹钟
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-13 20:36

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表