</> weather-card.php

325 行14660 字节.php
📥 下载源码 🔙 返回工具
1<!DOCTYPE html>
2<class="tag">html lang="zh-CN">
3<class="tag">head>
4<class="tag">meta charset="UTF-class="number">8">
5<class="tag">meta name="viewport" content="width=device-width, initial-scale=class="number">1.0">
6<class="tag">meta property="og:title" content="天气卡片 - η空间">
7<class="tag">meta name="description" content="查询任意城市天气,生成可嵌入网站的 HTML 天气卡片">
8<class="tag">meta name="keywords" content="天气卡片,天气预报,在线天气,天气组件">
9<class="tag">meta property="og:description" content="查询任意城市天气,生成可嵌入网站的 HTML 卡片">
10<class="tag">meta property="og:type" content="website">
11<class="tag">title>天气卡片生成 - η空间</class="tag">title>
12<class="tag">link rel="stylesheet" href="/tools/share.css">
13 <class="tag">link rel="stylesheet" href="/assets/pet-cat.css">
14<class="tag">style>
15* { margin: class="number">0; padding: class="number">0; box-sizing: border-box; }
16body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: class=class="string">"keyword">class=class="string">"comment">#f0f2f5; color: #class="number">333; line-height: class="number">1.6; }
17class=class="string">"keyword">header {
18 background: linear-gradient(135deg, class=class="string">"keyword">class=class="string">"comment">#0ea5e9, #6366f1);
19 color: class=class="string">"keyword">class=class="string">"comment">#fff; padding: 30px 20px; text-align: center;
20}
21class=class="string">"keyword">header h1 { font-size: 24px; margin-bottom: 4px; }
22class=class="string">"keyword">header p { opacity: class="number">0.85; font-size: 14px; }
23.container { max-width: 720px; margin: class="number">0 auto; padding: 24px 16px; }
24.back-link { display: inline-block; margin-bottom: 16px; color: class=class="string">"keyword">class=class="string">"comment">#0ea5e9; text-decoration: none; font-size: 14px; }
25.card { background: class=class="string">"keyword">class=class="string">"comment">#fff; border-radius: 12px; padding: 24px; box-shadow: class="number">0 2px 8px rgba(class="number">0,class="number">0,class="number">0,class="number">0.06); margin-bottom: 16px; }
26.form-row { display: flex; gap: 10px; margin-bottom: 16px; }
27.form-row input { flex: class="number">1; padding: 10px 14px; border: 1px solid class=class="string">"keyword">class=class="string">"comment">#ddd; border-radius: 8px; font-size: 15px; }
28.form-row input:focus { outline: none; border-color: class=class="string">"keyword">class=class="string">"comment">#0ea5e9; }
29.form-row button {
30 padding: 10px 24px; border: none; border-radius: 8px;
31 background: linear-gradient(135deg, class=class="string">"keyword">class=class="string">"comment">#0ea5e9, #6366f1);
32 color: class=class="string">"keyword">class=class="string">"comment">#fff; font-size: 15px; cursor: pointer;
33}
34.form-row button:hover { opacity: class="number">0.9; }
35.form-row button:disabled { opacity: class="number">0.4; cursor: not-allowed; }
36.spinner { display: none; text-align: center; padding: 20px; }
37.spinner::after {
38 content: class="string">''; display: inline-block; width: 32px; height: 32px;
39 border: 3px solid class=class="string">"keyword">class=class="string">"comment">#e0e0e0; border-top-color: #0ea5e9; border-radius: class="number">50%;
40 animation: spin class="number">0.8s linear infinite;
41}
42@keyframes spin { to { transform: rotate(360deg); } }
43.error { text-align: center; padding: 20px; color: class=class="string">"keyword">class=class="string">"comment">#ef4444; display: none; }
44
45/* Weather Card Preview */
46.weather-preview { display: none; }
47.weather-card {
48 background: linear-gradient(135deg, class=class="string">"keyword">class=class="string">"comment">#0f172a, #1e3a5f);
49 border-radius: 20px; padding: 28px; color: class=class="string">"keyword">class=class="string">"comment">#fff;
50 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
51 max-width: 400px; margin: class="number">0 auto;
52 box-shadow: class="number">0 8px 32px rgba(class="number">0,class="number">0,class="number">0,class="number">0.15);
53}
54.weather-card .city { font-size: 20px; font-weight: class="number">600; margin-bottom: 4px; }
55.weather-card .time { font-size: 12px; color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.6); margin-bottom: 20px; }
56.weather-card .main {
57 display: flex; align-items: center; justify-content: space-between;
58 margin-bottom: 20px;
59}
60.weather-card .temp { font-size: 56px; font-weight: class="number">700; letter-spacing: -2px; }
61.weather-card .temp-unit { font-size: 24px; opacity: class="number">0.7; }
62.weather-card .weather-icon { font-size: 48px; }
63.weather-card .desc { font-size: 14px; color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.8); margin-bottom: 16px; }
64.weather-card .details {
65 display: grid; grid-template-columns: 1fr 1fr;
66 gap: 8px; padding-top: 16px; border-top: 1px solid rgba(class="number">255,class="number">255,class="number">255,class="number">0.1);
67}
68.weather-card .detail-item {
69 display: flex; align-items: center; gap: 8px;
70 font-size: 13px; color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.7);
71}
72.weather-card .detail-item .val { color: class=class="string">"keyword">class=class="string">"comment">#fff; font-weight: class="number">500; }
73
74/* Weekly forecast */
75.weekly { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(class="number">255,class="number">255,class="number">255,class="number">0.1); }
76.weekly-title { font-size: 12px; color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.5); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
77.weekly-grid { display: flex; gap: 8px; }
78.weekly-day {
79 flex: class="number">1; text-align: center; padding: 8px 4px;
80 background: rgba(class="number">255,class="number">255,class="number">255,class="number">0.05); border-radius: 10px;
81}
82.weekly-day .day-name { font-size: 11px; color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.5); margin-bottom: 4px; }
83.weekly-day .day-icon { font-size: 18px; margin-bottom: 4px; }
84.weekly-day .day-temp { font-size: 13px; font-weight: class="number">600; }
85.weekly-day .day-temp .low { color: rgba(class="number">255,class="number">255,class="number">255,class="number">0.4); font-weight: class="number">400; }
86
87/* Export section */
88.export-section { display: none; margin-top: 16px; }
89.export-section textarea {
90 width: class="number">100%; height: 100px; padding: 12px; border: 1px solid class=class="string">"keyword">class=class="string">"comment">#ddd;
91 border-radius: 8px; font-family: class="string">'Courier New', monospace; font-size: 12px;
92 resize: vertical; background: class=class="string">"keyword">class=class="string">"comment">#f8f9fa; margin-bottom: 8px;
93}
94.copy-btn {
95 padding: 8px 20px; border: none; border-radius: 8px;
96 background: class=class="string">"keyword">class=class="string">"comment">#0ea5e9; color: #fff; font-size: 14px; cursor: pointer;
97}
98.copy-btn:hover { opacity: class="number">0.9; }
99.copy-btn.copied { background: class=class="string">"keyword">class=class="string">"comment">#22c55e; }
100
101/* Weather code to Chinese */
102footer { text-align: center; padding: 24px; color: class=class="string">"keyword">class=class="string">"comment">#class="number">999; font-size: 13px; }
103</class="tag">style>
104</class="tag">head>
105<class="tag">body>
106
107<class=class="string">"keyword">header>
108 <class="tag">h1>🌤️ 天气卡片</class="tag">h1>
109 <class="tag">p>查询天气,生成可嵌入网站的 HTML 卡片</class="tag">p>
110</class=class="string">"keyword">header>
111
112<class="tag">div class=class="string">"keyword">class="container">
113 <class="tag">a href="index.html" class=class="string">"keyword">class="back-link">← 返回工具列表</class="tag">a> · <class="tag">a href="/download/weather-card.zip" style="color:class=class="string">"keyword">class=class="string">"comment">#667eea;font-size:13px;text-decoration:none;">📦 源码下载</class="tag">a>
114
115 <class="tag">div class=class="string">"keyword">class="card">
116 <class="tag">div class=class="string">"keyword">class="form-row">
117 <class="tag">input type="text" id="cityInput" placeholder="输入城市名,如:北京、上海、广州..." onkeydown="class=class="string">"keyword">if(event.key===class="string">'Enter') searchWeather()">
118 <class="tag">button id="searchBtn" onclick="searchWeather()">查询</class="tag">button>
119 </class="tag">div>
120
121 <class="tag">div class=class="string">"keyword">class="spinner" id="spinner"></class="tag">div>
122 <class="tag">div class=class="string">"keyword">class="error" id="error"></class="tag">div>
123
124 <class="tag">div class=class="string">"keyword">class="weather-preview" id="weatherPreview">
125 <!-- Filled by JS -->
126 </class="tag">div>
127
128 <class="tag">div class=class="string">"keyword">class="export-section" id="exportSection">
129 <class="tag">textarea id="exportCode" readonly></class="tag">textarea>
130 <class="tag">button class=class="string">"keyword">class="copy-btn" id="copyBtn" onclick="copyCode()">📋 复制 HTML 代码</class="tag">button>
131 <class="tag">p style="margin-top:6px;font-size:12px;color:class=class="string">"keyword">class=class="string">"comment">#class="number">999;">将这段 HTML 嵌入你的网站即可显示天气卡片</class="tag">p>
132 </class="tag">div>
133 </class="tag">div>
134</class="tag">div>
135
136<class="tag">footer>
137 <class="tag">p>数据来源: Open-Meteo · 无需 API Key · 免费使用</class="tag">p>
138</class="tag">footer>
139
140<class="tag">script>
141class=class="string">"keyword">const WMO_CODES = {
142 class="number">0: [class="string">'☀️', class="string">'晴天'],
143 class="number">1: [class="string">'🌤️', class="string">'大部晴朗'],
144 class="number">2: [class="string">'⛅', class="string">'多云'],
145 class="number">3: [class="string">'☁️', class="string">'阴天'],
146 class="number">45: [class="string">'🌫️', class="string">'雾'],
147 class="number">48: [class="string">'🌫️', class="string">'冻雾'],
148 class="number">51: [class="string">'🌦️', class="string">'小毛毛雨'],
149 class="number">53: [class="string">'🌦️', class="string">'中毛毛雨'],
150 class="number">55: [class="string">'🌧️', class="string">'大毛毛雨'],
151 class="number">56: [class="string">'🌧️', class="string">'冻毛毛雨'],
152 class="number">57: [class="string">'🌧️', class="string">'冻毛毛雨'],
153 class="number">61: [class="string">'🌧️', class="string">'小雨'],
154 class="number">63: [class="string">'🌧️', class="string">'中雨'],
155 class="number">65: [class="string">'🌧️', class="string">'大雨'],
156 class="number">66: [class="string">'🌧️', class="string">'冻雨'],
157 class="number">67: [class="string">'🌧️', class="string">'冻雨'],
158 class="number">71: [class="string">'🌨️', class="string">'小雪'],
159 class="number">73: [class="string">'🌨️', class="string">'中雪'],
160 class="number">75: [class="string">'🌨️', class="string">'大雪'],
161 class="number">77: [class="string">'❄️', class="string">'雪粒'],
162 class="number">80: [class="string">'🌦️', class="string">'阵雨'],
163 class="number">81: [class="string">'🌧️', class="string">'中阵雨'],
164 class="number">82: [class="string">'🌧️', class="string">'大阵雨'],
165 class="number">85: [class="string">'🌨️', class="string">'小阵雪'],
166 class="number">86: [class="string">'🌨️', class="string">'大阵雪'],
167 class="number">95: [class="string">'⛈️', class="string">'雷暴'],
168 class="number">96: [class="string">'⛈️', class="string">'雷暴+冰雹'],
169 class="number">99: [class="string">'⛈️', class="string">'雷暴+冰雹']
170};
171
172class=class="string">"keyword">function getWeatherInfo(code) {
173 class=class="string">"keyword">return WMO_CODES[code] || [class="string">'❓', class="string">'未知'];
174}
175
176async class=class="string">"keyword">function searchWeather() {
177 class=class="string">"keyword">const city = document.class="func">getElementById(class="string">'cityInput').value.trim();
178 class=class="string">"keyword">if (!city) class=class="string">"keyword">return;
179
180 class=class="string">"keyword">const btn = document.class="func">getElementById(class="string">'searchBtn');
181 class=class="string">"keyword">const spinner = document.class="func">getElementById(class="string">'spinner');
182 class=class="string">"keyword">const error = document.class="func">getElementById(class="string">'error');
183 class=class="string">"keyword">const preview = document.class="func">getElementById(class="string">'weatherPreview');
184 class=class="string">"keyword">const exportSection = document.class="func">getElementById(class="string">'exportSection');
185
186 btn.disabled = true;
187 spinner.style.display = class="string">'block';
188 error.style.display = class="string">'none';
189 preview.style.display = class="string">'none';
190 exportSection.style.display = class="string">'none';
191
192 try {
193 class=class="string">"keyword">class=class="string">"comment">// Step class="number">1: Geocode
194 class=class="string">"keyword">const geoRes = await class="func">fetch(`https:class=class="string">"keyword">class=class="string">"comment">//geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(city)}&count=class="number">5&language=zh&format=json`);
195 class=class="string">"keyword">const geoData = await geoRes.json();
196
197 class=class="string">"keyword">if (!geoData.results || geoData.results.length === class="number">0) {
198 throw class=class="string">"keyword">new Error(class="string">'找不到该城市');
199 }
200
201 class=class="string">"keyword">const loc = geoData.results[class="number">0];
202 class=class="string">"keyword">const lat = loc.latitude;
203 class=class="string">"keyword">const lon = loc.longitude;
204 class=class="string">"keyword">const cityName = loc.name;
205 class=class="string">"keyword">const country = loc.country || class="string">'';
206 class=class="string">"keyword">const admin = loc.admin1 || class="string">'';
207
208 class=class="string">"keyword">class=class="string">"comment">// Step class="number">2: Get weather
209 class=class="string">"keyword">const weatherRes = await class="func">fetch(
210 `https:class=class="string">"keyword">class=class="string">"comment">//api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}` +
211 `&current=temperature_2m,relative_humidity_2m,apparent_temperature,weathercode,wind_speed_10m,pressure_msl` +
212 `&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto&forecast_days=class="number">7`
213 );
214 class=class="string">"keyword">const weather = await weatherRes.json();
215
216 class=class="string">"keyword">const current = weather.current;
217 class=class="string">"keyword">const daily = weather.daily;
218
219 class=class="string">"keyword">const [icon, desc] = getWeatherInfo(current.weathercode);
220 class=class="string">"keyword">const now = class=class="string">"keyword">new class="func">Date();
221 class=class="string">"keyword">const timeStr = now.toLocaleDateString(class="string">'zh-CN', { weekday: class="string">'long', year: class="string">'numeric', month: class="string">'long', day: class="string">'numeric' });
222
223 class=class="string">"keyword">class=class="string">"comment">// Render preview
224 preview.innerHTML = `
225 <class="tag">div class=class="string">"keyword">class="weather-card" id="cardForExport">
226 <class="tag">div class=class="string">"keyword">class="city">${cityName}${admin ? class="string">' · ' + admin : class="string">''}</class="tag">div>
227 <class="tag">div class=class="string">"keyword">class="time">${timeStr}</class="tag">div>
228 <class="tag">div class=class="string">"keyword">class="main">
229 <class="tag">div><class="tag">span class=class="string">"keyword">class="temp">${Math.round(current.temperature_2m)}</class="tag">span><class="tag">span class=class="string">"keyword">class="temp-unit">°C</class="tag">span></class="tag">div>
230 <class="tag">div class=class="string">"keyword">class="weather-icon">${icon}</class="tag">div>
231 </class="tag">div>
232 <class="tag">div class=class="string">"keyword">class="desc">${desc} · 体感 ${Math.round(current.apparent_temperature)}°C</class="tag">div>
233 <class="tag">div class=class="string">"keyword">class="details">
234 <class="tag">div class=class="string">"keyword">class="detail-item">💧 湿度 <class="tag">span class=class="string">"keyword">class="val">${current.relative_humidity_2m}%</class="tag">span></class="tag">div>
235 <class="tag">div class=class="string">"keyword">class="detail-item">💨 风速 <class="tag">span class=class="string">"keyword">class="val">${current.wind_speed_10m} km/h</class="tag">span></class="tag">div>
236 <class="tag">div class=class="string">"keyword">class="detail-item">🔽 气压 <class="tag">span class=class="string">"keyword">class="val">${Math.round(current.pressure_msl)} hPa</class="tag">span></class="tag">div>
237 <class="tag">div class=class="string">"keyword">class="detail-item">🌡️ 最高 <class="tag">span class=class="string">"keyword">class="val">${Math.round(daily.temperature_2m_max[class="number">0])}°C</class="tag">span></class="tag">div>
238 </class="tag">div>
239 <class="tag">div class=class="string">"keyword">class="weekly">
240 <class="tag">div class=class="string">"keyword">class="weekly-title">未来 class="number">7 天</class="tag">div>
241 <class="tag">div class=class="string">"keyword">class="weekly-grid">
242 ${daily.time.map((t, i) => {
243 class=class="string">"keyword">const [dIcon] = getWeatherInfo(daily.weathercode[i]);
244 class=class="string">"keyword">const dayName = class=class="string">"keyword">new class="func">Date(t).toLocaleDateString(class="string">'zh-CN', { weekday: class="string">'short' });
245 class=class="string">"keyword">return `<class="tag">div class=class="string">"keyword">class="weekly-day">
246 <class="tag">div class=class="string">"keyword">class="day-name">${dayName}</class="tag">div>
247 <class="tag">div class=class="string">"keyword">class="day-icon">${dIcon}</class="tag">div>
248 <class="tag">div class=class="string">"keyword">class="day-temp">${Math.round(daily.temperature_2m_max[i])}° <class="tag">span class=class="string">"keyword">class="low">${Math.round(daily.temperature_2m_min[i])}°</class="tag">span></class="tag">div>
249 </class="tag">div>`;
250 }).join(class="string">'')}
251 </class="tag">div>
252 </class="tag">div>
253 </class="tag">div>
254 `;
255 preview.style.display = class="string">'block';
256
257 class=class="string">"keyword">class=class="string">"comment">// Generate export HTML
258 class=class="string">"keyword">const exportHTML = generateCardHTML(cityName, admin, timeStr, current, daily, icon, desc);
259 document.class="func">getElementById(class="string">'exportCode').value = exportHTML;
260 document.class="func">getElementById(class="string">'exportSection').style.display = class="string">'block';
261
262 } catch (err) {
263 error.textContent = class="string">'❌ ' + err.message;
264 error.style.display = class="string">'block';
265 } finally {
266 btn.disabled = false;
267 spinner.style.display = class="string">'none';
268 }
269}
270
271class=class="string">"keyword">function generateCardHTML(city, admin, timeStr, current, daily, icon, desc) {
272 class=class="string">"keyword">function get7day() {
273 class=class="string">"keyword">return daily.time.map((t, i) => {
274 class=class="string">"keyword">const [dIcon] = getWeatherInfo(daily.weathercode[i]);
275 class=class="string">"keyword">const dayName = class=class="string">"keyword">new class="func">Date(t).toLocaleDateString(class="string">'zh-CN', { weekday: class="string">'short' });
276 class=class="string">"keyword">return `<class="tag">div style="flex:class="number">1;text-align:center;padding:8px 4px;background:rgba(class="number">255,class="number">255,class="number">255,class="number">0.05);border-radius:10px">
277 <class="tag">div style="font-size:11px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.5);margin-bottom:4px">${dayName}</class="tag">div>
278 <class="tag">div style="font-size:18px;margin-bottom:4px">${dIcon}</class="tag">div>
279 <class="tag">div style="font-size:13px;font-weight:class="number">600">${Math.round(daily.temperature_2m_max[i])}° <class="tag">span style="color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.4);font-weight:class="number">400">${Math.round(daily.temperature_2m_min[i])}°</class="tag">span></class="tag">div>
280 </class="tag">div>`;
281 }).join(class="string">'');
282 }
283
284 class=class="string">"keyword">return `<!-- 天气卡片 · 由 class="number">273059.cn 生成 -->
285<class="tag">div style="max-width:400px;font-family:-apple-system,BlinkMacSystemFont,class="string">'Segoe UI',sans-serif;background:linear-gradient(135deg,class=class="string">"keyword">class=class="string">"comment">#0f172a,#1e3a5f);border-radius:20px;padding:28px;color:#fff;box-shadow:class="number">0 8px 32px rgba(class="number">0,class="number">0,class="number">0,class="number">0.15)">
286 <class="tag">div style="font-size:20px;font-weight:class="number">600">${city}${admin ? class="string">' · ' + admin : class="string">''}</class="tag">div>
287 <class="tag">div style="font-size:12px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.6);margin-bottom:20px">${timeStr}</class="tag">div>
288 <class="tag">div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
289 <class="tag">div><class="tag">span style="font-size:56px;font-weight:class="number">700;letter-spacing:-2px">${Math.round(current.temperature_2m)}</class="tag">span><class="tag">span style="font-size:24px;opacity:class="number">0.7">°C</class="tag">span></class="tag">div>
290 <class="tag">div style="font-size:48px">${icon}</class="tag">div>
291 </class="tag">div>
292 <class="tag">div style="font-size:14px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.8);margin-bottom:16px">${desc} · 体感 ${Math.round(current.apparent_temperature)}°C</class="tag">div>
293 <class="tag">div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:16px;border-top:1px solid rgba(class="number">255,class="number">255,class="number">255,class="number">0.1)">
294 <class="tag">div style="font-size:13px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.7)">💧 湿度 <class="tag">span style="color:class=class="string">"keyword">class=class="string">"comment">#fff;font-weight:class="number">500">${current.relative_humidity_2m}%</class="tag">span></class="tag">div>
295 <class="tag">div style="font-size:13px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.7)">💨 风速 <class="tag">span style="color:class=class="string">"keyword">class=class="string">"comment">#fff;font-weight:class="number">500">${current.wind_speed_10m} km/h</class="tag">span></class="tag">div>
296 <class="tag">div style="font-size:13px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.7)">🔽 气压 <class="tag">span style="color:class=class="string">"keyword">class=class="string">"comment">#fff;font-weight:class="number">500">${Math.round(current.pressure_msl)} hPa</class="tag">span></class="tag">div>
297 <class="tag">div style="font-size:13px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.7)">🌡️ 最高 <class="tag">span style="color:class=class="string">"keyword">class=class="string">"comment">#fff;font-weight:class="number">500">${Math.round(daily.temperature_2m_max[class="number">0])}°C</class="tag">span></class="tag">div>
298 </class="tag">div>
299 <class="tag">div style="margin-top:20px;padding-top:16px;border-top:1px solid rgba(class="number">255,class="number">255,class="number">255,class="number">0.1)">
300 <class="tag">div style="font-size:12px;color:rgba(class="number">255,class="number">255,class="number">255,class="number">0.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px">未来 class="number">7 天</class="tag">div>
301 <class="tag">div style="display:flex;gap:8px">${get7day()}</class="tag">div>
302 </class="tag">div>
303</class="tag">div>
304<!-- 天气卡片结束 -->`;
305}
306
307class=class="string">"keyword">let copyTimer;
308class=class="string">"keyword">function copyCode() {
309 class=class="string">"keyword">const textarea = document.class="func">getElementById(class="string">'exportCode');
310 textarea.select();
311 document.execCommand(class="string">'copy');
312 class=class="string">"keyword">const btn = document.class="func">getElementById(class="string">'copyBtn');
313 btn.textContent = class="string">'✅ 已复制';
314 btn.classList.add(class="string">'copied');
315 clearTimeout(copyTimer);
316 copyTimer = class="func">setTimeout(() => {
317 btn.textContent = class="string">'📋 复制 HTML 代码';
318 btn.classList.remove(class="string">'copied');
319 }, class="number">2000);
320}
321</class="tag">script>
322<class="tag">script src="/tools/share.js"></class="tag">script>
323<class="tag">script src="/assets/pet-cat.js"></class="tag">script>
324</class="tag">body>
325</class="tag">html>

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 72

Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/273059_cn/tools/source-viewer.php:69) in /www/wwwroot/273059_cn/tools/source-viewer.php on line 73
天气卡片生成 - η空间

🌤️ 天气卡片

查询天气,生成可嵌入网站的 HTML 卡片

← 返回工具列表 · 📦 源码下载

将这段 HTML 嵌入你的网站即可显示天气卡片

数据来源: Open-Meteo · 无需 API Key · 免费使用