<!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. Node.js中间件的使用

    1.中间件 为主要的业务逻辑服务:接收到请求,以及做出响应 应用级中间件.路由级中间件.内置中间件.第三方中间件.错误处理中间件 (1)路由级中间件 路由器的使用 (2)应用级中间件 也称为自定义中间 ...

  2. 13.1 Go练习题

    13.1 Go练习题 创建一个goroutine与主线程按顺序相互发送信息若干次 且打印 slice在自动扩容后,内存地址变化 goroutine与闭包的坑 练习题汇总 package main fu ...

  3. Kali Linux 2020.1安装以及安装后要做的事

    Kali Linux是基于Debian的Linux发行版,预装了许多渗透测试软件,让大家从各种繁琐的软件安装中解脱出来,专注于测试本身. 本文章介绍了如何安装目前最新的2020.1版本,以及安装好后补 ...

  4. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  5. ftp服务器搭建（一）

    先安装vsftpd 发现安装yum不行 root命令下也不行 那么可以去 /var/lib/dpkg 把lock文件rm掉 然后在yum install vsftpd 发现可以了 注意:如果发现yum ...

  6. Windows系统下curl的下载和配置

    curl的下载和配置 简介:用URL规则在命令行下工作的文件传输工具. 下载:下载地址为 https://curl.haxx.se/download.html,在最底部找到Windows的版本,我下载 ...

  7. 测试开发专题:spring-boot如何使用JPA进行双向一对多配置

    本片文章我们主要介绍spring-boot如何进行JPA的配置以及如何进行实体间的一对多配置. 依赖准备 要在spring-boot使用jpa需要在项目中有进入相关的依赖,pom文件里加入下面内容 & ...

  8. DBUtils 使用方法

    导包  jar  DBUtils.jar QueryRunner中提供对sql语句操作的API. update(Connection conn, String sql, Object... param ...

  9. 实验二：Linux系统简单文件操作命令

    項目 内容 这个作业属于哪个课程() 课程链接 这个作业的要求在哪里 实验要求 学号-姓名 17043133-木腾飞 作业学习目标 学习在Linux系统终端下进行命令行操作: 学习掌握常用命令行操作并 ...

  10. Python Redis常用操作（持续更新）

    目录 1.Redis简介 2.Redis部署 3.Redis API应用 4.String操作 1.Redis简介 redis是业界主流的key-value,nosql数据库之一.和Memcached ...