使用 CSS、jQuery 和 PHP 实现实时天气显示

2006 年，我有一个想法，就是利用 雅虎天气 API 作为数据源，在公司的网站上显示实时天气信息。 然而，当时唯一有效的方法是使用 Flash，而公司由于开发时间的原因不愿意这样做。

六年后，作为我自己的公司 Engage Web 的技术总监，我重新审视了这个想法，并将其提升了几个阶段。 2012 年，Flash 不再必要，因为它在 2006 年所能做的所有事情现在都可以用 CSS3 Keyframes 完成。

我们的目标是让网站使用浏览者的地理位置来显示实时天气状况。 我们希望一天中的时间能够根据用户所在的地理位置进行反映，例如，在英国伦敦查看网站的用户看到的是与在美国加利福尼亚州圣地亚哥的用户在同一时间查看网站所看到的不同的样式。 目标是让人们可以通过我们的网站看到窗外的天气状况。

以下只是一些网站标题在任何给定时间可能呈现的最终状态的示例

不幸的是，我们遇到了由网页开发人员的旧敌人 Internet Explorer 引起的某些技术上的直接障碍。 IE 无法处理地理定位，因此无法从用户浏览器中获取其位置的准确近似值。 相反，我们不得不使用 IP 查询 API 来获取用户的位置，该位置仅精确到用户最近的首府城市（或大城市）。 为此，我们使用了 ipinfodb.com。 基于输入到该网站的 IP 地址，它会返回用户的国家、州/省和城市/镇。 我们只需要国家和城市/镇，然后将其输入到雅虎天气 API 中，返回该地区的实时天气数据。

如果没有从 ipinfodb.com 返回数据（例如，如果网站出现故障，或者无法从用户那里检索 IP 数据），则位置将默认为英国伦敦。

雅虎天气 API 和 ipinfodb.com 都会返回经度和纬度，然后使用这些经度和纬度来计算日落和日出时间，进而触发网站上的日出和日落。

最后的点睛之笔是月相，这是所有计算中最复杂的，尽管它只需要日期作为变量。

晴天还是雨天

让我们从天气开始。 雅虎以数字形式返回天气信息，目前在 0-47 之间，无信息时显示错误号 3200。 每个数字都代表不同的天气类型。

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

然后我们将天气类型分为四个数字。 第一个数字控制云层，它们有多亮或多暗，以及有多浓密。 第二个数字控制降雨。 网站上有不同程度的降雨，从小雨到暴雨不等。 第三个数字控制效果，例如闪电或雪，第四个数字用于偶然效果，例如灰尘或雾。

$weatherarray[39]=array('scattered thunderstorms',3,2,5,2);
$weatherarray[40]=array('scattered showers',3,2,0,2);
$weatherarray[41]=array('heavy snow',1,0,3,0);

我们在英国看到的比较常见的一种效果是降雨（我们有很多降雨），因此以下是我们在网站上如何实现降雨效果的。 以下动画降雨 gif 会以合适的透明度显示，具体取决于雅虎天气 API 中报告的降雨量。 我们以前的代码从雅虎获取信息，并为降雨强度分配变量，这些变量控制以下代码中动画降雨 gif 的透明度。



switch ( $effect1) {
    case 0:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.0"); 
       ';
        break;    
     case 1:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.10"); 
       ';
        break;     
      case 2:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.30"); 
       ';
        break;
      case 3:
        $weathercode.= '
             jQuery(\'#rain\').css("opacity", "0.50"); 
       ';
        break; 
}

满月、半月、月全食

整个过程中最困难的部分是月相。 为此，我们创建了一张包含 10 种不同月相变异的大图像。 CSS 然后根据从 PHP 脚本返回的数据决定如何显示正确的图像（这些计算，从字面上说，是天文计算）。

background-position: <?php echo $moonbgimagepos; ?>px 0;



计算月相的脚本来自 这里 的代码。

距离日落还有 300 秒

这个项目最精彩的部分是日落和日出效果，它会根据查看网站的用户的实际日落和日出时间发生。 利用我们之前提到的经度和纬度，会推算出日落和日出时间（具体取决于当前是白天还是黑夜），将其转换为 Unix 时间戳，并存储为变量。

当前时间也转换为 Unix 时间戳，将日落或日出时间与当前时间之间的差值用作 jQuery 函数的超时时间，该函数处理白天和黑夜之间的转换，反之亦然。

以下 jQuery 控制三个阶段之间的转换。 日落时，“白天”背景会淡出，并被橙色辉光背景（用于日落和日出）替换，而橙色辉光背景本身随后又会淡出成夜间背景。 同时，太阳本身开始从页面顶部下降到页面底部，这需要 300 秒才能完成。

jQuery('#daytime').fadeOut(200000, 'linear', function() {

  jQuery('#sill').fadeOut(100000, 'linear', function() {});

  jQuery('#sunset').fadeOut(100000, 'linear', function() {});
});   

在此过程中，任何相关的 天气效果也会叠加在屏幕上，例如降雨、降雪、闪电和云层移动。 作为附加效果，天际线也从白天主题过渡到夜间主题，以显示建筑物逐渐变得黑暗，城市灯光亮起。

昼夜交替

作为附加效果，网站的附加样式元素（例如着色效果）会根据时间是白天还是黑夜而改变。 这是通过在建立变量后使用 PHP 文件作为 CSS 来完成的。

<link rel="stylesheet" type="text/css" href="/css/styleweather.php" />

但是，如果您恰好在太阳下山或日出时访问网站，您会看到天际线和网站主题在白天过渡到黑夜时发生变化，反之亦然。 以下代码使用 jQuery 控制此过程

jQuery('#backmask').animate( {
    color: '#fff',
    backgroundColor: '#48508b'
    },300000, 'linear' );
jQuery('#menu-top-menu li,#blogmenu,#searchbox, #times').animate( {
    color: '#fff',
    backgroundColor: '#48508b'
    },300000, 'linear' );
jQuery('#Phone').animate( {
    color: '#fff',
    backgroundColor: '#48508b',
    boxShadow: '0 -10px 10px 4px #2A3160 inset'
    },300000, 'linear' );

测试，测试，123

在构建由用户经度和纬度推算出的日落和日出时间触发的功能时，测试该效果本身就是一项任务。 这需要计算出世界上太阳即将升起的地方，然后通过该国家的代理服务器连接到网站以检查时间。 在这个项目中，我们学到了很多关于地理、时区和日出时间的知识！

以下是 网站 的屏幕截图，显示效果正常

感谢设计师/开发人员 Steven Morris 为这个项目完成的设计工作。