Mặc định

Làm Đẹp

Chăm Sóc Tóc

Chăm Sóc Sức Khỏe

Chăm Sóc Da

Nước Hoa

Trang Điểm

Tin Tức Mới Nhất

<p>Xin chào,</p><p>Tôi xin gửi lời cảm ơn chân thành vì đã quan tâm và đăng ký theo dõi blog của tôi. Bằng cách là một thành viên trong cộng đồng của tôi, bạn sẽ được nhận thông báo về những bài viết mới nhất, tin tức nóng hổi và nhiều nội dung hấp dẫn khác mà tôi chia sẻ.</p>

Cập nhập tình hình thị trường chứng khoán, bất động sản, ngân hàng, doanh nghiệp,...

Tin tức tài chính kinh doanh mới nhất 24h

<div class="wx-box">
  <div class="wx-head">
    <div>
      <div class="wx-title">🌤️ Thời tiết theo ngày</div>
      <div class="wx-sub" id="wx-meta">Đang tải…</div>
    </div>

    <div class="wx-search">
      <input id="wx-city" placeholder="Nhập thành phố (vd: Hà Nội)" />
      <button id="wx-btn">Xem</button>
    </div>
  </div>

  <ul class="wx-list" id="wx-list"></ul>
</div>

<style>
  .wx-box{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;max-width:720px;border:1px solid #e5e7eb;border-radius:14px;padding:14px}
  .wx-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .wx-title{font-weight:700;font-size:18px}
  .wx-sub{color:#6b7280;font-size:13px;margin-top:2px}
  .wx-search{display:flex;gap:8px;align-items:center}
  .wx-search input{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;min-width:220px;outline:none}
  .wx-search button{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#111827;color:#fff;cursor:pointer}
  .wx-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .wx-item{border:1px solid #eef2f7;border-radius:12px;padding:10px}
  .wx-date{font-weight:600}
  .wx-desc{color:#374151;margin:6px 0 8px}
  .wx-temp{color:#111827}
  .wx-small{color:#6b7280;font-size:12px}
</style>

<script>
  // ====== CẤU HÌNH ======
  const DEFAULT_CITY = "Hà Nội";
  const FORECAST_DAYS = 7;
  const AUTO_REFRESH_MINUTES = 60; // đặt 0 nếu không muốn auto refresh

  // Weather code mapping (WMO codes) theo Open-Meteo docs :contentReference[oaicite:2]{index=2}
  const CODE = {
    0:["☀️","Trời quang"],
    1:["🌤️","Gần quang"], 2:["⛅","Có mây"], 3:["☁️","Nhiều mây"],
    45:["🌫️","Sương mù"], 48:["🌫️","Sương mù băng"],
    51:["🌦️","Mưa phùn nhẹ"], 53:["🌦️","Mưa phùn"], 55:["🌧️","Mưa phùn nặng"],
    56:["🌧️","Mưa phùn băng nhẹ"], 57:["🌧️","Mưa phùn băng"],
    61:["🌧️","Mưa nhẹ"], 63:["🌧️","Mưa vừa"], 65:["⛈️","Mưa to"],
    66:["🌧️","Mưa băng nhẹ"], 67:["🌧️","Mưa băng"],
    71:["🌨️","Tuyết nhẹ"], 73:["🌨️","Tuyết"], 75:["❄️","Tuyết dày"], 77:["🌨️","Hạt tuyết"],
    80:["🌦️","Mưa rào nhẹ"], 81:["🌦️","Mưa rào"], 82:["⛈️","Mưa rào mạnh"],
    85:["🌨️","Mưa tuyết"], 86:["❄️","Mưa tuyết mạnh"],
    95:["⛈️","Dông"], 96:["⛈️","Dông có mưa đá"], 99:["⛈️","Dông mưa đá mạnh"],
  };

  const $meta = document.getElementById("wx-meta");
  const $list = document.getElementById("wx-list");
  const $city = document.getElementById("wx-city");
  const $btn  = document.getElementById("wx-btn");

  function fmtDate(iso, timeZone) {
    // iso: YYYY-MM-DD
    const [y,m,d] = iso.split("-").map(Number);
    const dt = new Date(Date.UTC(y, m-1, d));
    return new Intl.DateTimeFormat("vi-VN", {
      weekday:"short", day:"2-digit", month:"2-digit",
      timeZone: timeZone || "Asia/Bangkok"
    }).format(dt);
  }

  async function geocodeCity(name) {
    // Geocoding API: /v1/search?name=... :contentReference[oaicite:3]{index=3}
    const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(name)}&count=1&language=vi&format=json`;
    const res = await fetch(url);
    if (!res.ok) throw new Error("Không gọi được geocoding API");
    const data = await res.json();
    const r = data?.results?.[0];
    if (!r) throw new Error("Không tìm thấy thành phố. Thử nhập rõ hơn (vd: 'Da Nang', 'Ho Chi Minh').");
    return { label: `${r.name}${r.country ? ", " + r.country : ""}`, lat: r.latitude, lon: r.longitude, tz: r.timezone || "auto" };
  }

  async function fetchDaily(lat, lon, tz) {
    // Forecast API: /v1/forecast?daily=... &timezone=... :contentReference[oaicite:4]{index=4}
    const dailyVars = "weathercode,temperature_2m_max,temperature_2m_min,precipitation_sum";
    const url =
      `https://api.open-meteo.com/v1/forecast` +
      `?latitude=${lat}&longitude=${lon}` +
      `&daily=${dailyVars}` +
      `&forecast_days=${FORECAST_DAYS}` +
      `&timezone=${encodeURIComponent(tz || "auto")}`;

    const res = await fetch(url);
    if (!res.ok) throw new Error("Không gọi được forecast API");
    return await res.json();
  }

  function render(label, tz, daily) {
    const now = new Date();
    $meta.textContent = `${label} • Cập nhật: ${now.toLocaleString("vi-VN")}`;
    $list.innerHTML = "";

    const t = daily.time || [];
    const tmax = daily.temperature_2m_max || [];
    const tmin = daily.temperature_2m_min || [];
    const code = daily.weathercode || [];
    const rain = daily.precipitation_sum || [];

    for (let i = 0; i < t.length; i++) {
      const c = code[i];
      const [icon, desc] = CODE[c] || ["🌤️", "Thời tiết"];
      const li = document.createElement("li");
      li.className = "wx-item";
      li.innerHTML = `
        <div class="wx-date">${fmtDate(t[i], tz)}</div>
        <div class="wx-desc">${icon} ${desc}</div>
        <div class="wx-temp">🌡️ ${Math.round(tmin[i])}° / ${Math.round(tmax[i])}°C</div>
        <div class="wx-small">💧 Mưa: ${rain[i] ?? 0} mm</div>
      `;
      $list.appendChild(li);
    }
  }

  async function load(cityName) {
    try {
      $meta.textContent = "Đang tải dữ liệu…";
      $list.innerHTML = "";
      const geo = await geocodeCity(cityName);
      const data = await fetchDaily(geo.lat, geo.lon, geo.tz);
      render(geo.label, geo.tz, data.daily);
    } catch (e) {
      $meta.textContent = "Lỗi: " + (e?.message || e);
    }
  }

  $btn.addEventListener("click", () => load($city.value.trim() || DEFAULT_CITY));
  $city.addEventListener("keydown", (e) => { if (e.key === "Enter") load($city.value.trim() || DEFAULT_CITY); });

  // chạy lần đầu
  $city.value = DEFAULT_CITY;
  load(DEFAULT_CITY);

  // auto refresh
  if (AUTO_REFRESH_MINUTES && AUTO_REFRESH_MINUTES > 0) {
    setInterval(() => load($city.value.trim() || DEFAULT_CITY), AUTO_REFRESH_MINUTES * 60 * 1000);
  }
</script>

Thời tiết

Bình luận

Nội dung

Hình ảnh