V2AS问路

意见反馈

第一次前端实习机试题 很粗糙的一个天气预报demo

阅读原文时间：2023年07月11日阅读：1

    

    

    

    

    

        

深圳天气

        

     

     

        

        

    

             

             

            

            

                

                

                

                

                

                

                

                

                

            

            

             

                {{item.temperature}}

                

                    

                    {{ item.winddirection}}风

                    {{item.windpower}}级

                    

                    相对湿度:{{item.humidity}}%

             

             

                 <!-- 

天气现象:{{ item.weather }}

                 

实时气温:{{ item.temperature}}摄氏度

 -->

                 <!-- 

风向:{{ item.winddirection }}

                 

风力级别:{{item.windpower}}

                 

空气湿度:{{item.humidity}}</li

                 

时间:{{item.reporttime}}

 -->

         

     

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;

            }

        });

    }

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

前端学习C语言 - 初级指针