<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{
                margin: 0;padding: 0;
             }
             body{
                background-image: url(img/timg.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
             }
            #top{
                text-align: center;
                width:100%;
                height:80px;
                font:80px LiSu;            }
            h3{
                color: azure;
                margin-left: 18px;
                padding-top: 5px;
            }
            #weather{
                height: 600px;
            }
             #p1{
                 color:black;
                 font-size: 30px;
                 font-family:LiSu;
                 margin-bottom: 30px;
                 margin-left:240px;
             }
             form{
                 margin-left: 360px;
             }
            #city {
                 padding: 8px;
                 width: 200px;
                 height: 16px;
                 border: 1px solid #00ff00;
            }
            #Search {
                 width: 80px;
                 height: 30px;
                 background-color: #000;
                 color: #fff;
                 border: 0;
                 vertical-align: middle;
           }
           #Search:hover {
                background-color: #00ff00;
                color: #ff6600;
           }
           #left{
                 margin-left: 420px;
                 margin-top: 93px;
                 color: rgb(0, 81, 255);
                 font-size: 200px;
                 font-family: LiSu;
           }
            .up{
                margin-left: 144px;
                 padding-top: 70px;
                 width:100%;
                 height:50px;
                 font-family: LiSu;
             }
            #right{
                 margin-left: 360px;
                 margin-top: -100px;
                 color: rgba(0, 0, 255, 0.651);
                 font-size: 30px;
                 font-family:LiSu;
             }
             img{
                 width: 20px;
                 height: 20px;
             }
             #btn{
                width: 40px;
                height: 20px;
                color: blanchedalmond;
                border:1px solid black;
                border-radius: 45%;
                background-color:black;
             }
        #topCoverDiv
        {
            opacity: 0.8;
            width: 100%;
            height: 450px;
            top: 0px;
            background-image: url(img/u=2339574525,672573164&fm=26&gp=0.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 100;
            /* text-align: center; */
        }
        #topCoverDiv>input{
            width:100px;
            height:50px;
            margin:45px;
        }
         </style>
</head>
<body>
    <div id="top">
        <h3>深圳天气</h3>
        <!-- 搜索功能 -->
     <!-- <form action="" onsubmit="return false;">
         <input type="text" name="" id="city" placeholder="请输入行政区或行政区编码">
         <input type="submit" value="搜索" id="search">
     </form> -->
    </div>
    
     <div id="weather">
         <div v-for="(item) in weatherData.lives">
             <div class="up">
             <p id="p1">
                <img src="img/9.png" alt="">地区：{{ item.city }}
                <button onclick="btn()" id="btn">切换</button>
                {{item.reporttime}}更新
                <br>
                     <!-- 搜索功能 -->
     <form action="" onsubmit="return false;">
        <input type="text" name="" id="city" placeholder="请输入行政区或行政区编码">
        <input type="submit" value="搜索" @click="search" id="Search">
    </form>
             </p>
             </div>
            <!-- 行政区div -->
            <div id="topCoverDiv" style="display:none;">
                <input type="submit" value="罗湖区"  onclick="change(440303)">
                <input type="submit" value="福田区"  onclick="change(440304)">
                <input type="submit" value="南山区"  onclick="change(440305)">
                <input type="submit" value="宝安区"  onclick="change(440306)">
                <input type="submit" value="龙岗区"  onclick="change(440307)">
                <input type="submit" value="盐田区"  onclick="change(440308)">
                <input type="submit" value="龙华区"  onclick="change(440309)">
                <input type="submit" value="坪山区"  onclick="change(440310)">
                <input type="submit" value="光明区"  onclick="change(440311)">
            </div>
            <!-- 温度  -->
             <div id="left">
                {{item.temperature}}
                <div id="right">
                    <img src="img/8.png" alt="">
                    {{ item.winddirection}}风
                    {{item.windpower}}级<br>
                    <img src="img/5.png" alt="">
                    相对湿度:{{item.humidity}}%
             </div>
             </div>
             
                 <!-- <li>天气现象:{{ item.weather }}</li>
                 <li>实时气温:{{ item.temperature}}摄氏度</li> -->
                 <!-- <li>风向:{{ item.winddirection }}</li>
                 <li>风力级别:{{item.windpower}}</li>
                 <li>空气湿度:{{item.humidity}}</li
                 <li>时间:{{item.reporttime}}</li> -->
         </div>
     </div>
     
     <!-- 引入 -->
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/vue.js"></script>
    <script src="weather.js"></script>
</body>
</html>
 
 
js代码
 
//    function search(){
 //搜索框值赋值给函数cityWeather
//     cityWeather($(city).val());
//    }
    //   切换行政区 
    function btn(){
        var maskBg = document.getElementById('topCoverDiv');
        maskBg.style.display = (maskBg.style.display == 'none') ? 'block' : 'none';
    }
    function change(adcode){
            cityWeather(adcode);
    }
    // vue展示
     var vmWeather = new Vue({
        el:"#weather",
        data:{
            weatherData:{}
        },
        methods:{
            search(){
                cityWeather($(city).val());
            }
        }
    })
    // 默认显示
    cityWeather("440305");
    // 天气接口
    function cityWeather(adcode) {
        // 清空对象
        vmWeather.weatherData={};
        $.ajax({
            type: "GET",//默认是GET
            url: "https://restapi.amap.com/v3/weather/weatherInfo",
            dataType: "jsonp",
            data: {
                city:adcode, // 城市
                output: "json", // 格式
                extensions:"base",//实况天气
                key: "704c3fe97b70e90c1e5db80a3363ef2f" // 高德地图
         },
            success: function (data) {
                console.log(data);
                vmWeather.weatherData = data;
            }
        });
    
    }
 

第一次前端实习机试题 很粗糙的一个天气预报demo的更多相关文章

  1. WEB前端常见面试题汇总：（一）

    1.JS找字符串中出现最多的字符 例如:求字符串'nininihaoa'中出现次数最多字符 方法一: var str = "nininihaoa"; var o = {}; for ...

  2. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  3. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  4. 前端开发面试题-HTML（转载）

    本文由 本文的原作者markyun 收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的! ...

  5. 前端开发面试题-JavaScript（转载）

    本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

  6. 前端基础面试题（js部分）

      前端基础面试题(JS部分)   1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...

  7. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  8. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确, ...

  9. Web前端面试笔试题总结

    最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...

随机推荐

  1. vue-cli 2.x 搭建项目

    一.vue-cli优势 1.成熟的vue项目架构设计 2.本地测试服务器 3.集成打包上线方案 二.系统要求 1.node.js 2. Git 3.node命令行终端 三.安装 1.安装vue-cli ...

  2. Codeforces1183C(C题）Computer Game

    Vova is playing a computer game. There are in total nn turns in the game and Vova really wants to pl ...

  3. 01.drf文档及外键字段反序列化

    一 安装drf 1.1 安装库 pip install djangorestframework pip install markdown # Markdown support for the brow ...

  4. .net System.Web.Mail发送邮件 (设置发件人 只显示用户名)

    http://blog.163.com/hao_2468/blog/static/130881568201141251642215/ .net System.Web.Mail发送邮件 2011-05- ...

  5. 【Linux】Linux常用操作

    终端命令格式 command [-options] [parameter]command : 命令名,相应功能的英文单词或单词的缩写[-options]:选项,可用来对命令进行控制,也可以省略para ...

  6. 一个基类Person的多个派生类 代码参考

    #include <iostream> #include <cstring> using namespace std; class Person { protected: ch ...

  7. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  8. python pexpect总结

    基本使用流程 pexpect 的使用说来说去,就是围绕3个关键命令做操作: 首先用 spawn 来执行一个程序 然后用 expect 来等待指定的关键字,这个关键字是被执行的程序打印到标准输出上面的 ...

  9. C语言/Linux命令行参数argc、argv[ ]详解

    1.void main(int argc,char *argv[]) argv[]:表示的是一个指针数组,一共有argc个元素,其中存放的是指向每一个参数的指针. argc:参数个数 2.以Linux ...

  10. MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图

    一:背景 1. 讲故事 最近看各大技术社区,不管是知乎,掘金,博客园,csdn基本上看不到有小伙伴分享sqlserver类的文章,看样子这些年sqlserver没落了,已经后继无人了,再写sqlser ...