使用天气数据通过 PHP 和 CSS 改变网站的外观

更新 #2： 这是旧的。 我认为这里不再有任何东西起作用，因为 API 往往会在几年内发生变化。 如果您正在寻找可以正常工作的与天气相关的代码示例，您可能需要在其他地方寻找。

更新 #1： 本文于 2008 年 4 月 30 日更新，以解决雅虎提供数据的方式发生的一项小变化 更新的下载

---

使用一些魔法和技巧（阅读：PHP 和 CSS），我们可以自动根据外面的天气实时改变网站的外观！ 在我们创建的 示例网站 中，页眉图形会根据晴朗、雨、雪和多云这四种不同风格之一进行更改。

步骤 1：设计天气图形

我们的示例网站会更改页眉图形以及侧边栏中的图标，以描述天气。 为了举例，我们只创建了四种不同的天气情况，默认为晴朗。

步骤 2：检索天气信息

雅虎有一个天气信息 API。 我们可以非常轻松地使用以下格式的 URL 访问它

http://weather.yahooapis.com/forecastrss?p=97211&u=f

五位数是您的邮政编码，“f”代表“华氏度”（更改为“c”代表“摄氏度”）。 信息以 XML 格式提供，您自己决定如何解析数据。 由于我们只关心“yweather:condition”元素的“text”属性，我们将避免创建 XML 解析对象并使用简短的正则表达式。

正则表达式返回 yweather 元素的文本后，我们将使用 str_replace() 和 strtolower 将字符串格式化为代表性的 CSS 类。

步骤 3：将天气信息转换为 CSS 类

以下是 PHP 代码

<?php
	
	/* get xml, find match */
	
	/* get the weather from Yahoo */
	$data = get_data("http://weather.yahooapis.com/forecastrss?p=97211&u=f");
	
	$weather_class = format_result(get_match('/<yweather:condition  text="(.*)"/isU',$data));
	
	/* debug to see what we got back */
	//echo '<pre style="background:#fff;font-size:12px;">['; print_r($weather); echo ']</pre>';
	
	/* format the result */
	function format_result($input)
	{
		return strtolower(str_replace(array(' ', '(', ')'), array('-', '-', ''), $input));
	}
	
	/* helper:  does regex */  
	function get_match($regex,$content)  
	{  
		preg_match($regex,$content,$matches);  
		return $matches[1];  
	}
	
	/* gets the xml data from Alexa */
	function get_data($url)
	{
		$ch = curl_init();
		$timeout = 5;
		curl_setopt($ch,CURLOPT_URL,$url);
		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
		curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
		$xml = curl_exec($ch);
		curl_close($ch);
		return $xml;
	}
	
?>

现在我们有一个可以回显的变量，它代表我们提供的邮政编码的当前天气

<div class="header header-<?php echo $weather_class; ?>">
	<!-- Change the class above to change the header graphic -->
</div>

步骤 4：为每个类编写 CSS 代码

.header {
	width: 782px; height: 150px;
	/* DEFAULTS TO SUNNY */
	background: url(images/header-sunny.png) no-repeat center center black;
	}
	.header-rain {
		background: url(images/header-rain.png) no-repeat center center black;
	}
	header-snow {
		background: url(images/header-snow.png) no-repeat center center black;
	}
	.header-sunny, .header-fair {
		background: url(images/header-sunny.png) no-repeat center center black;
	}
	.header-partly-cloudy, .header-cloudy, .header-mostly-cloudy {
		background: url(images/header-partlycloudy.png) no-repeat center center black;
}

步骤 5：扩展这个想法

请注意，我们对“部分多云”、“多云”和“大部分多云”的天气状况使用“部分多云”图形。 您自己决定要变得多具体。 以下是雅虎可能提供的所有天气状况的完整列表：

0  	tornado
1 	tropical storm
2 	hurricane
3 	severe thunderstorms
4 	thunderstorms
5 	mixed rain and snow
6 	mixed rain and sleet
7 	mixed snow and sleet
8 	freezing drizzle
9 	drizzle
10 	freezing rain
11 	showers
12 	showers
13 	snow flurries
14 	light snow showers
15 	blowing snow
16 	snow
17 	hail
18 	sleet
19 	dust
20 	foggy
21 	haze
22 	smoky
23 	blustery
24 	windy
25 	cold
26 	cloudy
27 	mostly cloudy (night)
28 	mostly cloudy (day)
29 	partly cloudy (night)
30 	partly cloudy (day)
31 	clear (night)
32 	sunny
33 	fair (night)
34 	fair (day)
35 	mixed rain and hail
36 	hot
37 	isolated thunderstorms
38 	scattered thunderstorms
39 	scattered thunderstorms
40 	scattered showers
41 	heavy snow
42 	scattered snow showers
43 	heavy snow
44 	partly cloudy
45 	thundershowers
46 	snow showers
47 	isolated thundershowers

对于这个示例，您会注意到我们还使用了硬编码的邮政编码，必须在 PHP 中更改，才能更改网站将根据其外观进行更改的天气位置。 但是，如果网站知道访问者的邮政编码，并根据他们的天气而不是您的天气改变网站的外观，那不是很酷吗？ 这种类型的编码需要超出本教程范围的服务和专业知识，但快速谷歌搜索会显示一些可能使这种情况发生的 service，比如 IP2Location.

玩得开心！ - 告诉我是否有人实际使用了它，我很想看看您用它做了什么。