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

    
    
    Document
    
    
        

深圳天气

        
     
    
    
     
         
             
             
                地区:{{ item.city }}
                切换
                {{item.reporttime}}更新
                
                     
     
        
        
    
             

             

            
            
                
                
                
                
                
                
                
                
                
            
            
             
                {{item.temperature}}
                
                    
                    {{ item.winddirection}}风
                    {{item.windpower}}级
                    
                    相对湿度:{{item.humidity}}%
             
             
             
                 
                 
         
     
     
     
    
    
    
 
 
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)