<!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. hdu3397 Sequence operation 线段树

    hdu3397 Sequence operation #include <bits/stdc++.h> using namespace std; ; struct node { /// l ...

  2. SpringBoot教程——检视阅读

    SpringBoot教程--检视阅读 参考 SpringBoot教程--一点--蓝本--springboot2.1.1 SpringBoot教程--易百--springboo2.0.5.RELEASE ...

  3. python3.x 基础三：字符集问题

    总结了一张表,更详细信息百度百科: 序号 年份 编码 标准协会 特点 二进制长度 字符长度 表现 1 1967 ASCII 美国国家标准学会(American National Standard In ...

  4. React Native 架构演进

    写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...

  5. STM32 Keil 软件仿真设置

    设置 Dialog.DLL 分别为:DARMSTM.DLL和TARMSTM.DLL, Parameter 均为:-pSTM32F103RC,用于设置支持芯片的软硬件仿真

  6. 存储系列之 LUN 和 LVM

    一.LUN 1.LUN的由来 上一篇文章已经介绍了RAID技术的原理,那么RAID的实现呢?有两种方式,RAID软件和RAID硬件.但是因软件RAID占用主机CPU和主机内存,而且RAID功能不易实现 ...

  7. ios审核 "prefs:root="被拒

    https://blog.csdn.net/xnickname666/article/details/83068516 使用TZImagePicker  https://github.com/banc ...

  8. 初探Redis-基础类型List

    Redis存在五种基础类型:字符串(String).列表(List).哈希(Hash).集合(Set).有序集合(Sorted Set).本次列举出List的常用操作. Redis官网:https:/ ...

  9. 跟着阿里学JavaDay02——Java编程起步

    几乎所有语言的第一个程序都是"HelloWorld" 就像所有单片机初学者一样,点亮第一个LED灯开始 而起初我们编写/学习Java程序,都是通过记事本来编写的,这里推荐一个Edi ...

  10. Rocket - devices - TLZero

    https://mp.weixin.qq.com/s/JHjUZncEcoZpRxIS1ECV5g 简单介绍TLZero的实现. 1. /dev/null /dev/null最主要的特点是写入的数据被 ...