API 演示

// 获取城市数据
async function getCityTime(cityId) {
  try {
    const response = await fetch(`/api/cities/${cityId}`);
    const city = await response.json();
    
    // 获取当前时间
    const now = new Date();
    const formatter = new Intl.DateTimeFormat('en-US', {
      timeZone: city.timezone,
      hour12: false,
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
    
    const time = formatter.format(now);
    console.log(`${city.cityEn}: ${time}`);
    
    return { city, time };
  } catch (error) {
    console.error('Error fetching city data:', error);
  }
}

// 使用示例
getCityTime('tokyo');
getCityTime('new-york');
getCityTime('london');

import requests
from datetime import datetime
import pytz

def get_city_time(city_id):
    """获取城市时间信息"""
    try:
        # 获取城市数据
        response = requests.get(f'https://worldtimeapp.online/api/cities/{city_id}')
        city = response.json()
        
        # 获取时区信息
        timezone = pytz.timezone(city['timezone'])
        current_time = datetime.now(timezone)
        
        print(f"{city['cityEn']}: {current_time.strftime('%H:%M:%S')}")
        
        return {
            'city': city,
            'time': current_time.strftime('%H:%M:%S'),
            'date': current_time.strftime('%Y-%m-%d')
        }
    except Exception as e:
        print(f"Error: {e}")
        return None

# 使用示例
get_city_time('tokyo')
get_city_time('new-york')
get_city_time('london')

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

function WorldClock({ cityId }) {
  const [cityData, setCityData] = useState(null);
  const [currentTime, setCurrentTime] = useState('');

  useEffect(() => {
    // 获取城市数据
    fetch(`/api/cities/${cityId}`)
      .then(response => response.json())
      .then(data => setCityData(data))
      .catch(error => console.error('Error:', error));
  }, [cityId]);

  useEffect(() => {
    if (!cityData) return;

    // 更新时间
    const updateTime = () => {
      const now = new Date();
      const formatter = new Intl.DateTimeFormat('en-US', {
        timeZone: cityData.timezone,
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
      setCurrentTime(formatter.format(now));
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);

    return () => clearInterval(interval);
  }, [cityData]);

  if (!cityData) return <div>Loading...</div>;

  return (
    <div className="city-clock">
      <h3>{cityData.cityEn}</h3>
      <div className="time">{currentTime}</div>
      <div className="timezone">{cityData.timezone}</div>
      <div className="country">{cityData.countryEn}</div>
    </div>
  );
}

export default WorldClock;