<!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. EF Join连接查询的坑

    最近做项目的时候遇到一个需要级联查询的数据,表中又没有定义相关的外键约束,所以限定了咱们只能使用Join方式的关联而不是Include的方式关联,关于Include和Join的详细用法,本屌就不再此处 ...

  2. chosen.jquery.js

    http://baifjece.blog.163.com/blog/static/33794654201286102519119/ ------------------首次加载设置默认选中项----- ...

  3. docker常用命令，及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录)

    docker常用命令,及进入Tomcat的WebApps发布目录(就是进入docker容器后台目录)   一.常用命令 1.显示所有的容器,包括未运行的 docker ps -a   2.启动容器.注 ...

  4. MySQL 8.0用户及安全管理

    用户的功能 登录数据库 管理数据库对象 用户的组成 用户名@'白名单' 白名单: % 10.0.0.10 .% 10.0.0.5% 10.0.0.0/255.255.254.0 oldguo.com ...

  5. [Abp vNext 入坑分享] - 8.Redis与Refit的接入

    前言 本章结束之后,这个abp vnext系列算是初步完结了,基础的组件都已经接入了.如果各位还需要其它的组件的话,可以自己按需要进行接入使用.其实这个只是一个基础的框架,可以自己根据需要进行变通的. ...

  6. MRCTF 2020 WP

    MRCTF 2020 WP 引言 周末趁上课之余,做了一下北邮的CTF,这里记录一下做出来的几题的WP ez_bypass 知识点:MD5强类型比较,is_numeric()函数绕过 题目源码: I ...

  7. websocket ddos检测脚本

    from websocket import create_connection while(1): ws = create_connection('wss://ha-cmim.cmcc-cs.cn:1 ...

  8. Chisel3 - model - when

    https://mp.weixin.qq.com/s/YGTXky4wff7LXUphUxISQg   介绍创建模块判断逻辑的when命令.   1. when/elsewhen/otherwise ...

  9. 题解 CF1348D 【Phoenix and Science】

    题目大意,每天细菌会在早上选择分裂,晚上生长. 观察题目,我们可以发现.不管我们怎么分裂细菌,这一天晚上的总质量都是前一天晚上的总质量加上今天的细菌数. 那么我们肯定希望细菌分裂的越多越好,这样我们减 ...

  10. JAVASE(七)面向对象：封装性(特性之一)、构造器、属性、关键字

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.封装性 1.为什么要使用封装性? 创建对象以后,可以通过对象.属性名的方法进行赋值.只能限制数据的类 ...