1.先看效果

2.源代码

"use client"

import { useState, useEffect } from 'react'

import { Moon, Sun } from 'lucide-react'

import { Button } from "@/components/ui/button"

import { Switch } from "@/components/ui/switch"

const cities = [

{ name: 'New York', offset: -4 },

{ name: 'London', offset: 1 },

{ name: 'Tokyo', offset: 9 },

{ name: 'Sydney', offset: 10 },

]

export default function AdvancedClock() {

const [time, setTime] = useState(new Date())

const [isDarkMode, setIsDarkMode] = useState(false)

const [isStopwatchRunning, setIsStopwatchRunning] = useState(false)

const [stopwatchTime, setStopwatchTime] = useState(0)

useEffect(() => {

const timer = setInterval(() => setTime(new Date()), 1000)

return () => clearInterval(timer)

}, [])

useEffect(() => {

if (isStopwatchRunning) {

const stopwatchTimer = setInterval(() => setStopwatchTime(prev => prev + 1), 10)

return () => clearInterval(stopwatchTimer)

}

}, [isStopwatchRunning])

const toggleTheme = () => setIsDarkMode(!isDarkMode)

const toggleStopwatch = () => setIsStopwatchRunning(!isStopwatchRunning)

const resetStopwatch = () => {

setIsStopwatchRunning(false)

setStopwatchTime(0)

}

const formatTime = (date: Date) => {

return date.toLocaleTimeString('en-US', { hour12: false })

}

const formatStopwatchTime = (time: number) => {

const minutes = Math.floor(time / 6000)

const seconds = Math.floor((time % 6000) / 100)

const milliseconds = time % 100

return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`

}

return (