溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

百度API 免費(fèi)接口獲取天氣預(yù)報(bào)

發(fā)布時(shí)間：2020-08-06 05:38:12 來源：網(wǎng)絡(luò) 閱讀：5231 作者：大大果 欄目：開發(fā)技術(shù)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#result{width: 800px;border:1px solid #ddd;margin-top: 30px;background: #aaa;display: none;}

#result p{height: 25px;line-height: 25px;padding-left: 20px;color: #fff;font-weight: bold;font-size: 16px;}

#result p span{padding: 0 10px;display: inline-block;width: 120px;text-align:center;height: 25px;line-height: 25px;}

#result p span.temp{width: 250px;text-align: left;margin-left: 20px;}

</style>

<script src="Jquery/jquery-1.12.4.js"></script>

<script>

$(function(){

$(window).on('load',function(){

$.ajax({

'type':'get',

'url':'http://apis.baidu.com/heweather/weather/free?city=beijing',

'headers':{'apikey':'2c6d2927ef76200697018e989f6afbbb'},

'success':function(data){

$('#result').show();

data = data['HeWeather data service 3.0'][0];

var basic_info = '城市：' + data.basic.cnty + '&nbsp;' + data.basic.city;

var tianqi = data.daily_forecast;

$('<p><strong>' + basic_info + '</strong></p>').appendTo('#result');

$('<p><span>日期</span><span>氣溫</span><span class="temp">天氣</span></p>').appendTo('#result');

$.each(tianqi,function(index,element){

var html = '';

var date = element.date;

var temperature = element.tmp.min + '&#176;C - ' + element.tmp.max + '&#176;C';

var w1 = element.cond.txt_d;

var w2 = element.cond.txt_n;

var weather;

if(w1 == w2){

weather = w1;

}

else{

weather = w1 + ' 轉(zhuǎn) ' + w2;

}

html += '<span>'+ date +'</span>' + '<span>'+ temperature +'</span>' + '<span class="temp">'+ weather +'</span>';

$('<p>'+ html +'</p>').appendTo('#result');

});

}

});

});


$('#query').on('click',function(){

$('#result').hide().empty();

var city = $.trim($('#city').val());

$.ajax({

'type':'get',

'url':'http://apis.baidu.com/heweather/weather/free',

'data':{'city':city},

'headers':{'apikey':'2c6d2927ef76200697018e989f6afbbb'},

'success':function(data){

$('#city').val('');

data = data['HeWeather data service 3.0'][0];

console.log(data);

var basic_info = '城市：' + data.basic.cnty + '&nbsp;' + data.basic.city;

var tianqi = data.daily_forecast;

$('<p><strong>' + basic_info + '</strong></p>').appendTo('#result');

$('<p><span>日期</span><span>氣溫</span><span>天氣</span></p>').appendTo('#result');

$.each(tianqi,function(index,element){

var html = '';

var date = element.date;

var temperature = element.tmp.min + '℃ - ' + element.tmp.max + '℃';

var w1 = element.cond.txt_d;

var w2 = element.cond.txt_n;

var weather;

if(w1 == w2){

weather = w1;

}

else{

weather = w1 + ' 轉(zhuǎn) ' + w2;

}

html += '<span>'+ date +'</span>' + '<span>'+ temperature +'</span>' + '<span>'+ weather +'</span>';

$('<p>'+ html +'</p>').appendTo('#result');

$('#result').show();

});

}

});

});

});

</script>

</head>

<body>

<input type="text" placeholder="請(qǐng)輸入城市" id="city" />

<input type="button" value="查詢" id="query" />

<div id="result"></div>

</body>

</html>


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手