<!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. Redux:store

    Store是一个对象.他有如下职责: 1.存放state 2.对外提供访问state的接口: getState() 3.允许state更新:dispatch(action) 4.注册监听器: subs ...

  2. Linux系统rabbitmq安装

    rabbitmq消息队列(Message Queue)是一种应用间的通信方式,消息发送后可以立即返回,由消息系统来确保消息的可靠传递.消息发布者只管把消息发布到 MQ 中而不用管谁来取,消息使用者只管 ...

  3. 【PHP+MySQL学习笔记】php操作MySQL数据库中语句

    1.连接 MYSQL 服务器的函数 mysql_connect();<?php $con = mysql_connect("localhost","root&quo ...

  4. Ext.tree.TreePanel 属性详解

    Ext.tree.TreePanel 属性详解 2013-06-09 11:02:47|  分类: ExtJs|举报|字号 订阅  原文地址:http://blog.163.com/zzf_fly/b ...

  5. SPL常用迭代器

    ArrayIterator 熟悉使用seek()跳过元素 熟悉使用asort,ksort排序 <?php $fruits = array( 'apple'=>'apple value', ...

  6. 最全的ASCII码对照表

    转自https://blog.csdn.net/jinduozhao/article/details/75398793 十进制代码 十六进制代码 MCS 字符或缩写 DEC 多国字符名 ASCII 控 ...

  7. Jmeter(三) - 从入门到精通 - 测试计划（Test Plan）的元件（详解教程）

    1.简介 上一篇中宏哥已经教你如何通过JMeter来创建一个测试计划(Test Plan),那么这一篇我们就将JMeter启动起来,创建一个测试计划(Test plan),然后宏哥给大家介绍一下测试计 ...

  8. windows环境下Kubernetes及Docker安装(那些坑)

    k8s 和 Docker容器技术,当前非常流行的技术. 让人日狗的是,   这套技术栈对CN的donet 程序员不怎么友好.娓娓道来,1. 好多镜像都是需要梯子才能访问: 2. window程序员天生 ...

  9. [工具推荐]003.Tortoisegit使用教程

    Git简介:       Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目,是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 ...

  10. 【转】网页的title左边的小图片怎么添加

    首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...