拙作一件，还请各位轻拍哈O(∩_∩)O~

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4157 天前的主题，其中的信息可能已经有所发展或是发生改变。

一款天气类的Web App （IE慎入：）

地址： http://1.htmldemo.sinaapp.com/demo7/index.php
GitCafe： https://gitcafe.com/liangliang/WeatherReport

前端菜鸟一枚，自己学了几个月的html/css/js，恰好在网上看到一个老外的教程（http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/），于是琢磨着自个也写了个，每天晚上七点更新天气数据。

小伙伴们给点建议吧~(@^_^@)~

拙作

菜鸟

慎入

60 条回复 • 1970-01-01 08:00:00 +08:00

wupher

2013-08-07 20:02:26 +08:00

很漂亮！

liangliang

2013-08-07 20:04:31 +08:00

@wupher 谢谢~T^T

liangliang

2013-08-07 20:07:10 +08:00

求一下SAE开发者认证：）
http://sae.sina.com.cn/?m=home&a=devlevel&level=normal_level&voteme=HjejDf
感谢T^T

haiyang416

2013-08-07 20:09:49 +08:00

@liangliang 虽然是仿做的，但是效果还不错。
SAE开发者认证现在不用求了，已经不收租金了。

liangliang

2013-08-07 20:11:20 +08:00

@haiyang416 soga~ thx

Luciush

2013-08-07 20:45:41 +08:00

提些意見吧。
1，太簡單了！！！除了看溫度和天氣之外，沒有其他的功能甚至些許動畫效果來讓用戶停留。
2，天氣預報的icon做得並不是特別簡明易懂，最崩壞的地方是每日的溫度之間間隙實在太小了，看起來讓人有些煩躁。
3，各個城市的顏色搭配原理是什麼？感覺這些方面其實可以更加用心點，或者加些地標圖片之類的？
如果LZ能夠在原型的基礎上繼續改進些細節的話就好了。

liangliang

2013-08-07 20:48:46 +08:00

@Luciush 收到~多谢指导O(∩_∩)O~

qiuai

2013-08-07 21:04:59 +08:00

没有数据库?

rayps

2013-08-07 21:11:03 +08:00

感觉功能上已经没问题了，可以往视觉上搞点创意，例如用jquery加点动画玩玩吧

daoluan

2013-08-07 21:11:59 +08:00

UI 不错。

liangliang

2013-08-07 21:14:00 +08:00

@rayps 哈哈，正有此意T^T

liangliang

2013-08-07 21:14:40 +08:00

@daoluan thx~

liangliang

2013-08-07 21:16:27 +08:00

@qiuai 有，天气数据来自中国气象局，我参考了这里的 http://blog.csdn.net/hello_haozi/article/details/7564223

qiuai

2013-08-07 21:34:21 +08:00

@liangliang CREATE TABLE `weather` (
`cityid` varchar(255) NOT NULL,
`city` varchar(255) NOT NULL,
`temp1` varchar(255) NOT NULL,
`temp2` varchar(255) NOT NULL,
`temp3` varchar(255) NOT NULL,
`temp4` varchar(255) NOT NULL,
`temp5` varchar(255) NOT NULL,
`temp6` varchar(255) NOT NULL,
`img1` varchar(255) NOT NULL,
`img2` varchar(255) NOT NULL,
`img3` varchar(255) NOT NULL,
`img6` varchar(255) NOT NULL,
`img5` varchar(255) NOT NULL,
`img4` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `weather` (`cityid`, `city`, `temp1`, `temp2`, `temp3`, `temp4`, `temp5`, `temp6`, `img1`, `img2`, `img3`, `img6`, `img5`, `img4`) VALUES
('101330101', 'macao', '27â„ƒ~33â„ƒ', '28â„ƒ~33â„ƒ', '29â„ƒ~34â„ƒ', '27â„ƒ~33â„ƒ', '27â„ƒ~32â„ƒ', '26â„ƒ~30â„ƒ', '3', '0', '0', '8', '3', '1'),
('101010100', 'beijing', '23â„ƒ~34â„ƒ', '24â„ƒ~35â„ƒ', '24â„ƒ~34â„ƒ', '24â„ƒ~30â„ƒ', '23â„ƒ~32â„ƒ', '23â„ƒ~33â„ƒ', '3', '0', '0', '4', '1', '4'),
('101020100', 'shanghai', '31â„ƒ~40â„ƒ', '30â„ƒ~39â„ƒ', '30â„ƒ~38â„ƒ', '29â„ƒ~37â„ƒ', '29â„ƒ~37â„ƒ', '29â„ƒ~37â„ƒ', '0', '0', '0', '0', '0', '0'),
('101280101', 'guangzhou', '25â„ƒ~34â„ƒ', '25â„ƒ~34â„ƒ', '25â„ƒ~35â„ƒ', '25â„ƒ~33â„ƒ', '25â„ƒ~33â„ƒ', '25â„ƒ~33â„ƒ', '0', '0', '0', '4', '4', '0'),
('101230201', 'xiamen', '26â„ƒ~35â„ƒ', '26â„ƒ~35â„ƒ', '26â„ƒ~33â„ƒ', '26â„ƒ~32â„ƒ', '26â„ƒ~32â„ƒ', '25â„ƒ~31â„ƒ', '1', '1', '1', '1', '1', '1'),
('101210101', 'hangzhou', '30â„ƒ~40â„ƒ', '27â„ƒ~40â„ƒ', '29â„ƒ~39â„ƒ', '29â„ƒ~38â„ƒ', '29â„ƒ~39â„ƒ', '29â„ƒ~38â„ƒ', '0', '0', '0', '1', '0', '0'),
('101270101', 'chengdu', '21â„ƒ~28â„ƒ', '22â„ƒ~33â„ƒ', '23â„ƒ~33â„ƒ', '24â„ƒ~33â„ƒ', '24â„ƒ~33â„ƒ', '23â„ƒ~32â„ƒ', '8', '1', '1', '3', '3', '3'),
('101280601', 'shenzhen', '27â„ƒ~32â„ƒ', '27â„ƒ~32â„ƒ', '27â„ƒ~33â„ƒ', '27â„ƒ~33â„ƒ', '27â„ƒ~33â„ƒ', '26â„ƒ~32â„ƒ', '1', '3', '1', '3', '3', '3'),
('101250101', 'changsha', '30â„ƒ~39â„ƒ', '30â„ƒ~39â„ƒ', '30â„ƒ~39â„ƒ', '30â„ƒ~38â„ƒ', '30â„ƒ~38â„ƒ', '29â„ƒ~38â„ƒ', '0', '0', '0', '1', '1', '0'),
('101110101', 'xian', '22â„ƒ~28â„ƒ', '22â„ƒ~32â„ƒ', '23â„ƒ~34â„ƒ', '24â„ƒ~34â„ƒ', '23â„ƒ~35â„ƒ', '24â„ƒ~35â„ƒ', '8', '2', '1', '1', '1', '1'),
('101050101', 'haerbin', '22â„ƒ~30â„ƒ', '21â„ƒ~30â„ƒ', '20â„ƒ~30â„ƒ', '20â„ƒ~31â„ƒ', '22â„ƒ~29â„ƒ', '22â„ƒ~30â„ƒ', '4', '1', '0', '1', '4', '0'),
('101320101', 'hongkong', '27â„ƒ~33â„ƒ', '28â„ƒ~32â„ƒ', '29â„ƒ~33â„ƒ', '27â„ƒ~33â„ƒ', '27â„ƒ~32â„ƒ', '26â„ƒ~29â„ƒ', '1', '0', '0', '8', '3', '1'),
('101340102', 'taoyuan', '27â„ƒ~36â„ƒ', '27â„ƒ~36â„ƒ', '26â„ƒ~36â„ƒ', '26â„ƒ~36â„ƒ', '27â„ƒ~36â„ƒ', '26â„ƒ~36â„ƒ', '1', '0', '1', '2', '7', '7');

我自己写了个.

说真的...你的文档写的真烂啊...cityid跟city还对不起来...还debug了一次才正常起来...

liangliang

2013-08-07 21:46:32 +08:00

@qiuai 抱歉，立马改去。。。。
再一次感谢指教~

qiuai

2013-08-07 22:27:15 +08:00

@liangliang 然后你的sql语言忘了写 ; 了

Perry

2013-08-07 22:32:49 +08:00 via iPhone

Responsive手机大小还可以再优化。点开的详细温度的字体太小了

liangliang

2013-08-07 22:38:18 +08:00

@Perry 打算写一个移动版的：）

hustlzp

2013-08-07 22:41:39 +08:00

底部的空隙可以加大一点。

liangliang

2013-08-07 22:44:06 +08:00

@hustlzp thx~

liangliang

2013-08-07 22:46:31 +08:00

@qiuai 额，能否详细说说？脑子没转过来。。。

qiuai

2013-08-07 23:37:09 +08:00

@liangliang $query = "update weathe..."这个.没在结尾有;

不知道是不是我PHP版本的问题?

binux

2013-08-07 23:41:25 +08:00

这个颜色和天气毫无关系，仅仅是好看而已吗？

liangliang

2013-08-08 00:08:21 +08:00

@binux 是。。。接下来会考虑下对应关系的^_^

liangliang

2013-08-08 00:11:45 +08:00

@qiuai 额，我这里显示有；
莫非是最后那个引号前的空格捣的鬼？

leoleozhu

2013-08-08 07:58:53 +08:00 via Android

上海杭州28度不科学啊

refresh

2013-08-08 08:06:55 +08:00

打包一下，可以发布到windows store了，再加点特色，可以卖0.99了，呵呵

jedyu

2013-08-08 09:24:07 +08:00

@leoleozhu +1
杭州最高气温才28度，敢直视吗？

yangg

2013-08-08 09:43:04 +08:00

详细页里，下面一排温度数字看着太挤了，考虑写成 27〜32℃ or ？

liangliang

2013-08-08 09:47:29 +08:00

@yangg 我在想，是显示温度范围呢还是干脆给个平均温度？

yangg

2013-08-08 09:49:13 +08:00

@liangliang 平均值，不行的吧，一般都是范围，一个数字的话应该是实时温度，一天中平均值太没谱了

liangliang

2013-08-08 09:55:51 +08:00

@yangg ok~
thx~

qiuai

2013-08-08 10:02:32 +08:00

@liangliang 我这奇怪了.没有.

liangliang

2013-08-08 10:09:23 +08:00

@qiuai 那个。。。GitCafe你现在登得上去吗？

qiuai

2013-08-08 10:36:35 +08:00

@liangliang 404

liangliang

2013-08-08 10:37:44 +08:00

@qiuai +1

LokiSharp

2013-08-08 12:59:47 +08:00

@liangliang 你本人也上不去么？

liangliang

2013-08-08 13:17:55 +08:00

@LokiSharp 不确定账号是否被盗，我放到github上了
https://github.com/xyqfer/WeatherReport

LokiSharp

2013-08-08 13:23:00 +08:00

发邮件给 [email protected] 吧。

jeansfish

2013-08-08 13:26:19 +08:00

icon区分白天和晚上的，所以一天抓一次频率不够吧。

liangliang

2013-08-08 13:41:02 +08:00

@jeansfish 恩恩，现在可以显示实时温度了。。。就是还有点小问题

liangliang

2013-08-08 13:42:29 +08:00

@LokiSharp 好的^_^
thx~

liangliang

2013-08-08 21:30:13 +08:00

@jedyu
@leoleozhu
感谢提醒，已更正

LokiSharp

2013-08-08 21:50:55 +08:00

@liangliang 我现在也在自学 HTML/CSS/JS ，能交个朋友么？

liangliang

2013-08-08 22:41:46 +08:00

@LokiSharp 欢迎欢迎O(∩_∩)O~

LokiSharp

2013-08-08 22:52:48 +08:00

@liangliang 我现在开始学，你不嫌弃我，我很高兴。

Gmail： loki.sharp at gmail dot com

LokiSharp

2013-08-08 22:54:32 +08:00

@LokiSharp 额，还没看就点了发送。。。

我刚开始学，断断续续的学了一个月，你不嫌弃我，我很高兴。

liangliang

2013-08-08 23:16:28 +08:00

@LokiSharp 哈，有啥好嫌弃的？~
gmail: xyqfer at gmail dot com

kawaiiushio

2013-08-09 00:53:13 +08:00

中间的大数字代表什么？

kawaiiushio

2013-08-09 00:55:05 +08:00

我错了我的chrome昨天强制了。。。。另外你的git挂了

liangliang

2013-08-09 10:51:15 +08:00

@kawaiiushio 已转到github
https://github.com/xyqfer/WeatherReport

madao

2013-08-09 13:38:26 +08:00

很好看。

liangliang

2013-08-09 14:03:30 +08:00

@madao thx~

blandook

2013-08-09 14:15:53 +08:00

PM2.5数据来个

liangliang

2013-08-09 14:26:55 +08:00

@blandook 这个可以有
thx~

iZr

2013-08-09 19:54:28 +08:00

为什么我放上去,没温度呢,是不是要其他配置?

287854442

2013-08-09 20:15:31 +08:00

Nice！

kawaiiushio

2013-08-09 20:16:44 +08:00

@iZr 好像要写入数据库的楼主这个应该是sae的吧

liangliang

2013-08-09 21:22:33 +08:00

@kawaiiushio 是的

liangliang

2013-08-09 21:22:43 +08:00

@287854442 thx~