V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liangliang
V2EX  ›  分享创造

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

  •  
  •   liangliang · 2013-08-07 20:00:58 +08:00 · 4730 次点击
    这是一个创建于 4125 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一款天气类的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
        1
    wupher  
       2013-08-07 20:02:26 +08:00
    很漂亮!
    liangliang
        2
    liangliang  
    OP
       2013-08-07 20:04:31 +08:00
    @wupher 谢谢~T^T
    liangliang
        3
    liangliang  
    OP
       2013-08-07 20:07:10 +08:00
    haiyang416
        4
    haiyang416  
       2013-08-07 20:09:49 +08:00
    @liangliang 虽然是仿做的,但是效果还不错。
    SAE开发者认证现在不用求了,已经不收租金了。
    liangliang
        5
    liangliang  
    OP
       2013-08-07 20:11:20 +08:00
    @haiyang416 soga~ thx
    Luciush
        6
    Luciush  
       2013-08-07 20:45:41 +08:00
    提些意見吧。
    1,太簡單了!!!除了看溫度和天氣之外,沒有其他的功能甚至些許動畫效果來讓用戶停留。
    2,天氣預報的icon做得並不是特別簡明易懂,最崩壞的地方是每日的溫度之間間隙實在太小了,看起來讓人有些煩躁。
    3,各個城市的顏色搭配原理是什麼?感覺這些方面其實可以更加用心點,或者加些地標圖片之類的?
    如果LZ能夠在原型的基礎上繼續改進些細節的話就好了。
    liangliang
        7
    liangliang  
    OP
       2013-08-07 20:48:46 +08:00
    @Luciush 收到~多谢指导O(∩_∩)O~
    qiuai
        8
    qiuai  
       2013-08-07 21:04:59 +08:00
    没有数据库?
    rayps
        9
    rayps  
       2013-08-07 21:11:03 +08:00
    感觉功能上已经没问题了,可以往视觉上搞点创意,例如用jquery加点动画玩玩吧
    daoluan
        10
    daoluan  
       2013-08-07 21:11:59 +08:00
    UI 不错。
    liangliang
        11
    liangliang  
    OP
       2013-08-07 21:14:00 +08:00
    @rayps 哈哈,正有此意T^T
    liangliang
        12
    liangliang  
    OP
       2013-08-07 21:14:40 +08:00
    @daoluan thx~
    liangliang
        13
    liangliang  
    OP
       2013-08-07 21:16:27 +08:00
    @qiuai 有,天气数据来自中国气象局,我参考了这里的 http://blog.csdn.net/hello_haozi/article/details/7564223
    qiuai
        14
    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
        15
    liangliang  
    OP
       2013-08-07 21:46:32 +08:00
    @qiuai 抱歉,立马改去。。。。
    再一次感谢指教~
    qiuai
        16
    qiuai  
       2013-08-07 22:27:15 +08:00
    @liangliang 然后你的sql语言忘了写 ; 了
    Perry
        17
    Perry  
       2013-08-07 22:32:49 +08:00 via iPhone
    Responsive手机大小还可以再优化。点开的详细温度的字体太小了
    liangliang
        18
    liangliang  
    OP
       2013-08-07 22:38:18 +08:00
    @Perry 打算写一个移动版的:)
    hustlzp
        19
    hustlzp  
       2013-08-07 22:41:39 +08:00
    底部的空隙可以加大一点。
    liangliang
        20
    liangliang  
    OP
       2013-08-07 22:44:06 +08:00
    @hustlzp thx~
    liangliang
        21
    liangliang  
    OP
       2013-08-07 22:46:31 +08:00
    @qiuai 额,能否详细说说?脑子没转过来。。。
    qiuai
        22
    qiuai  
       2013-08-07 23:37:09 +08:00
    @liangliang $query = "update weathe..."这个.没在结尾有;

    不知道是不是我PHP版本的问题?
    binux
        23
    binux  
       2013-08-07 23:41:25 +08:00
    这个颜色和天气毫无关系,仅仅是好看而已吗?
    liangliang
        24
    liangliang  
    OP
       2013-08-08 00:08:21 +08:00
    @binux 是。。。接下来会考虑下对应关系的^_^
    liangliang
        25
    liangliang  
    OP
       2013-08-08 00:11:45 +08:00
    @qiuai 额,我这里显示有;
    莫非是最后那个引号前的空格捣的鬼?
    leoleozhu
        26
    leoleozhu  
       2013-08-08 07:58:53 +08:00 via Android
    上海杭州28度不科学啊
    refresh
        27
    refresh  
       2013-08-08 08:06:55 +08:00
    打包一下,可以发布到windows store了,再加点特色,可以卖0.99了,呵呵
    jedyu
        28
    jedyu  
       2013-08-08 09:24:07 +08:00
    @leoleozhu +1
    杭州最高气温才28度,敢直视吗?
    yangg
        29
    yangg  
       2013-08-08 09:43:04 +08:00
    详细页里,下面一排温度数字看着太挤了,考虑写成 27〜32℃ or ?
    liangliang
        30
    liangliang  
    OP
       2013-08-08 09:47:29 +08:00
    @yangg 我在想,是显示温度范围呢还是干脆给个平均温度?
    yangg
        31
    yangg  
       2013-08-08 09:49:13 +08:00
    @liangliang 平均值,不行的吧,一般都是范围,一个数字的话应该是实时温度,一天中平均值太没谱了
    liangliang
        32
    liangliang  
    OP
       2013-08-08 09:55:51 +08:00
    @yangg ok~
    thx~
    qiuai
        33
    qiuai  
       2013-08-08 10:02:32 +08:00
    @liangliang 我这奇怪了.没有.
    liangliang
        34
    liangliang  
    OP
       2013-08-08 10:09:23 +08:00
    @qiuai 那个。。。GitCafe你现在登得上去吗?
    qiuai
        35
    qiuai  
       2013-08-08 10:36:35 +08:00
    liangliang
        36
    liangliang  
    OP
       2013-08-08 10:37:44 +08:00
    @qiuai +1
    LokiSharp
        37
    LokiSharp  
       2013-08-08 12:59:47 +08:00
    @liangliang 你本人也上不去么?
    liangliang
        38
    liangliang  
    OP
       2013-08-08 13:17:55 +08:00
    @LokiSharp 不确定账号是否被盗,我放到github上了
    https://github.com/xyqfer/WeatherReport
    LokiSharp
        39
    LokiSharp  
       2013-08-08 13:23:00 +08:00
    发邮件 给 [email protected] 吧。
    jeansfish
        40
    jeansfish  
       2013-08-08 13:26:19 +08:00
    icon区分白天和晚上的,所以一天抓一次频率不够吧。
    liangliang
        41
    liangliang  
    OP
       2013-08-08 13:41:02 +08:00
    @jeansfish 恩恩,现在可以显示实时温度了。。。就是还有点小问题
    liangliang
        42
    liangliang  
    OP
       2013-08-08 13:42:29 +08:00
    @LokiSharp 好的^_^
    thx~
    liangliang
        43
    liangliang  
    OP
       2013-08-08 21:30:13 +08:00
    @jedyu
    @leoleozhu
    感谢提醒,已更正
    LokiSharp
        44
    LokiSharp  
       2013-08-08 21:50:55 +08:00
    @liangliang 我现在也在自学 HTML/CSS/JS ,能交个朋友么?
    liangliang
        45
    liangliang  
    OP
       2013-08-08 22:41:46 +08:00
    @LokiSharp 欢迎欢迎O(∩_∩)O~
    LokiSharp
        46
    LokiSharp  
       2013-08-08 22:52:48 +08:00
    @liangliang 我现在开始学,你不嫌弃我,我很高兴。

    Gmail: loki.sharp at gmail dot com
    LokiSharp
        47
    LokiSharp  
       2013-08-08 22:54:32 +08:00
    @LokiSharp 额,还没看就点了发送。。。

    我刚开始学,断断续续的学了一个月,你不嫌弃我,我很高兴。
    liangliang
        48
    liangliang  
    OP
       2013-08-08 23:16:28 +08:00
    @LokiSharp 哈,有啥好嫌弃的?~
    gmail: xyqfer at gmail dot com
    kawaiiushio
        49
    kawaiiushio  
       2013-08-09 00:53:13 +08:00
    中间的大数字代表什么?
    kawaiiushio
        50
    kawaiiushio  
       2013-08-09 00:55:05 +08:00
    我错了 我的chrome昨天强制了。。。。另外你的git挂了
    liangliang
        51
    liangliang  
    OP
       2013-08-09 10:51:15 +08:00
    madao
        52
    madao  
       2013-08-09 13:38:26 +08:00
    很好看。
    liangliang
        53
    liangliang  
    OP
       2013-08-09 14:03:30 +08:00
    @madao thx~
    blandook
        54
    blandook  
       2013-08-09 14:15:53 +08:00
    PM2.5数据来个
    liangliang
        55
    liangliang  
    OP
       2013-08-09 14:26:55 +08:00
    @blandook 这个可以有
    thx~
    iZr
        56
    iZr  
       2013-08-09 19:54:28 +08:00
    为什么我放上去,没温度呢,是不是要其他配置?
    287854442
        57
    287854442  
       2013-08-09 20:15:31 +08:00
    Nice!
    kawaiiushio
        58
    kawaiiushio  
       2013-08-09 20:16:44 +08:00
    @iZr 好像要写入数据库的 楼主这个应该是sae的吧
    liangliang
        59
    liangliang  
    OP
       2013-08-09 21:22:33 +08:00
    @kawaiiushio 是的
    liangliang
        60
    liangliang  
    OP
       2013-08-09 21:22:43 +08:00
    @287854442 thx~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1629 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 16:58 · PVG 00:58 · LAX 08:58 · JFK 11:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.