目录
API天气预报效果htmlcss
周公解梦效果htmlcss
汇率查询效果htmlcss
API
天气预报接口 小白接口推荐
天气预报
效果
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>天气预报</title>
<link rel="stylesheet" type="text/css" href="css/6.30.1.css" />
</head>
<body>
<div id="body">
<div id="title">
<span>重 庆 市</span>
</div>
<div id="weaList">
<ul id="weaGroup"></ul>
</div>
<div id="weaList2">
<ul id="weaGroup2"></ul>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var param = {
getWeather: function() {
$.ajax({
type: 'GET',
url: 'https://www.tianqiapi.com/api/',
data: 'appid=32921575&appsecret=5MRGhdwZ&version=v9&cityid=0&city=重庆&ip=0&callback=0',
dataType: 'JSON',
error: function() {
alert('网络错误');
},
success: function(res) {
for (var i = 0; i < 7; i++) {
$('#weaGroup').append('<li>' + '<span>' + res.data[i].date + res.data[i].week + '</span>' +
' <img src="img/' + res.data[i].wea_img + '.svg" src /> ' +
' <span> ' + res.data[i].tem + '℃ </span> ' + '</li>');
}
for (var j = 0; j < 24; j++) {
$('#weaGroup2').append('<li>' + '<span>' + res.data[0].hours[j].hours +'</span> <span>'+ res.data[0].hours[j].wea +'</span> <span>'+ res.data[0].hours[j].tem + '℃ </span>' + '</li>');
}
}
});
}
}
param.getWeather();
</script>
</body>
</html>
css
#body{
position: absolute;
top: 20px;
left: 183px;
width: 1000px;
}
#title{
position: absolute;
top: 80px;
left: 420px;
font-size: 25px;
}
#weaList{
position: absolute;
top: 120px;
}
#weaGroup li{
list-style: none;
height: 50px;
}
#weaGroup span{
position: relative;
left: 150px;
width: 200px;
}
#weaGroup img{
position: relative;
top: 12px;
left: 280px;
font-size: 25px;
width: 35px;
height: 35px;
}
#weaList img+span{
position: relative;
left: 450px;
width: 200px;
}
#weaList2{
position: absolute;
left: 900px;
width: 200px;
}
#weaList2 li{
list-style: none;
}
#weaList2 span{
line-height: 30px;
}
周公解梦
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>周公解梦</title>
<link rel="stylesheet" type="text/css" href="css/6.30.2.css" />
</head>
<body>
<span>周公解梦</span>
<input class="word" id="ww" placeholder=" 输入梦境关键词" />
<a href="javascript:void(0)" onclick="ajaxTest.dream()">开始解梦</a>
<div></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var ajaxTest = {
dream: function(){
$("div span").empty();
$.ajax({
type: 'GET',
url: 'http://hn216.api.yesapi.cn/',
data: 's=App.Common_Dream.Explain&app_key=8172256C2E350799428DF1639A32A8F4&sign=7D767391DB49156DB2717956AA5E3727&dream_keyword='+ $('#ww').val(),
dataType: 'JSON',
error: function() {
alert('错误');
},
success: function(req) {
$('div').append('<span>' + req.data.explain_result + '</span> ');
}
});
}
}
</script>
</body>
</html>
css
/* 周公解梦 */
span{
position: absolute;
top: 120px;
left: 633px;
font-size: 25px;
}
input{
position: absolute;
top: 175px;
left: 475px;
width: 400px;
height: 40px;
border-color: #000000;
outline:none;
padding-left: 5px;
font-size: 15px;
color: #001E50;
}
a{
position: absolute;
top: 175px;
left: 885px;
width: 80px;
height: 40px;
border:2px solid #000000 ;
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
div>span{
color: #000000;
font-size: 12px;
line-height: 20px;
position: absolute;
top: 230px;
left: 234px;
width: 888px;
margin-bottom: 50px;
}
汇率查询
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>货币汇率</title>
<link rel="stylesheet" type="text/css" href="css/6.30.2.css" />
<link rel="stylesheet" type="text/css" href="css/6.30.3.css" />
</head>
<body>
<span>汇率查询</span>
<input class="word" id="ww" placeholder=" 输入货币代码,如USD/CNY" />
<a href="javascript:void(0)" onclick="ajaxTest.money()">提交</a>
<div></div>
<table >
<thead>
<tr>
<th>货币代码</th>
<th>代币名称</th>
<th>国家</th>
</tr>
</thead>
<tbody>
<tr>
<td>AED</td>
<td>UAE Dirham</td>
<td>Arab Emirates</td>
</tr>
<tr>
<td>AUD</td>
<td>Australian Dollar</td>
<td>Australia</td>
</tr>
<tr>
<td>ARS</td>
<td>Argentine Peso</td>
<td>Argentina</td>
</tr>
<tr>
<td>BGN</td>
<td>Bulgarian Lev</td>
<td>Bulgaria</td>
</tr>
<tr>
<td>BRL</td>
<td>Brazilian Real</td>
<td>Brazil</td>
</tr>
<tr>
<td>BSD</td>
<td>Bahamian Dollar</td>
<td>Bahamas</td>
</tr>
<tr>
<td>CAD</td>
<td>Canadian Dollar</td>
<td>Canada</td>
</tr>
<tr>
<td>CHF</td>
<td>Swiss Franc</td>
<td>Switzerland</td>
</tr>
<tr>
<td>CLP</td>
<td>Chilean Peso</td>
<td>Chile</td>
</tr>
<tr>
<td>CNY</td>
<td>人民币</td>
<td>中国</td>
</tr>
<tr>
<td>COP</td>
<td>Colombian Peso</td>
<td>Colombia</td>
</tr>
<tr>
<td>CZK</td>
<td>Czech Koruna</td>
<td>Czech Republic</td>
</tr>
<tr>
<td>DKK</td>
<td>Danish Krone</td>
<td>Denmark</td>
</tr>
<tr>
<td>DOP</td>
<td>Dominican Peso</td>
<td>Dominican Republic</td>
</tr>
<tr>
<td>EGP</td>
<td>Egyptian Pound</td>
<td>Egypt</td>
</tr>
<tr>
<td>EUR</td>
<td>Euro</td>
<td>Germany/Austria/Belgium..</td>
</tr>
<tr>
<td>FJD</td>
<td>Fiji Dollar</td>
<td>Fiji</td>
</tr>
<tr>
<td>GBP</td>
<td>Pound Sterling</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>GTQ</td>
<td>Guatemalan Quetzal</td>
<td>Guatemala</td>
</tr>
<tr>
<td>HKD</td>
<td>港币</td>
<td>中国香港</td>
</tr>
<tr>
<td>HRK</td>
<td>Croatian Kuna</td>
<td>Croatia</td>
</tr>
<tr>
<td>HUF</td>
<td>Hungarian Forint</td>
<td>Hungary</td>
</tr>
<tr>
<td>IDR</td>
<td>Indonesian Rupiah</td>
<td>Indonesia</td>
</tr>
<tr>
<td>ILS</td>
<td>Israeli New Shekel</td>
<td>Israel</td>
</tr>
<tr>
<td>INR</td>
<td>Indian Rupee</td>
<td>India</td>
</tr>
<tr>
<td>ISK</td>
<td>Icelandic Krona</td>
<td>Iceland</td>
</tr>
<tr>
<td>JPY</td>
<td>日元</td>
<td>日本</td>
</tr>
<tr>
<td>KRW</td>
<td>South Korean Won</td>
<td>韩国</td>
</tr>
<tr>
<td>KZT</td>
<td>Kazakhstani Tenge</td>
<td>Kazakhstan</td>
</tr>
<tr>
<td>MXN</td>
<td>Mexican Peso</td>
<td>Mexico</td>
</tr>
<tr>
<td>MYR</td>
<td>Malaysian Ringgit</td>
<td>Malaysia</td>
</tr>
<tr>
<td>NOK</td>
<td>Norwegian Krone</td>
<td>Norway</td>
</tr>
<tr>
<td>NZD</td>
<td>New Zealand Dollar</td>
<td>New Zealand</td>
</tr>
<tr>
<td>PAB</td>
<td>Panamanian Balboa</td>
<td>Panama</td>
</tr>
<tr>
<td>PEN</td>
<td>Peruvian Sol</td>
<td>Peru</td>
</tr>
<tr>
<td>PHP</td>
<td>Philippine Peso</td>
<td>Philippines</td>
</tr>
<tr>
<td>PKR</td>
<td>Pakistani Rupee</td>
<td>Pakistan</td>
</tr>
<tr>
<td>PLN</td>
<td>Polish Zloty</td>
<td>Poland</td>
</tr>
<tr>
<td>PYG</td>
<td>Paraguayan Guarani</td>
<td>Paraguay</td>
</tr>
<tr>
<td>RON</td>
<td>Romanian Leu</td>
<td>Romania</td>
</tr>
<tr>
<td>RUB</td>
<td>Russian Ruble</td>
<td>Russia</td>
</tr>
<tr>
<td>SAR</td>
<td>Saudi Riyal</td>
<td>Saudi Arabia</td>
</tr>
<tr>
<td>SEK</td>
<td>Swedish Krona</td>
<td>Sweden</td>
</tr>
<tr>
<td>SGD</td>
<td>Singapore Dollar</td>
<td>新加坡</td>
</tr>
<tr>
<td>THB</td>
<td>泰铢</td>
<td>泰国</td>
</tr>
<tr>
<td>TRY</td>
<td>Turkish Lira</td>
<td>Turkey</td>
</tr>
<tr>
<td>TWD</td>
<td>New Taiwan Dollar</td>
<td>Taiwan</td>
</tr>
<tr>
<td>UAH</td>
<td>Ukrainian Hryvnia</td>
<td>Ukraine</td>
</tr>
<tr>
<td>USD</td>
<td>美元</td>
<td>美国</td>
</tr>
<tr>
<td>UYU</td>
<td>Uruguayan Peso</td>
<td>Uruguay</td>
</tr>
<tr>
<td>ZAR</td>
<td>South African Rand</td>
<td>South Africa</td>
</tr>
</tbody>
</table>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var ajaxTest = {
money: function() {
$("div span").empty();
$.ajax({
type: 'GET',
url: 'http://hn216.api.yesapi.cn/',
data: '&s=App.Currency.ExchnageRate&app_key=8172256C2E350799428DF1639A32A8F4&sign=0EE62F7B58F4E1DACC2D93D5F5EA3BAF',
dataType: 'JSON',
error: function() {
alert('错误');
},
success: function(data) {
//表格显示所有货币汇率
// for (var key in data.data.rates) {
// $('tbody').append('<tr>' + '<td>' + data.data.rates[key] + '</td>' + '</tr>');
// }
$('div').append('<span> 汇率为' + data.data.rates[$('#ww').val()] + '</span> ');
}
});
}
}
</script>
</body>
</html>
css
/* 货币汇率 */
table{
position: absolute;
left: 12px;
border: #000000;
}
span{
position: absolute;
top: 145px;
left: 633px;
font-size: 25px;
}
input{
position: absolute;
top: 200px;
left: 633px;
width: 400px;
height: 40px;
border-color: #000000;
outline:none;
padding-left: 5px;
font-size: 15px;
color: #001E50;
}
a{
position: absolute;
top: 200px;
left: 1045px;
width: 80px;
height: 40px;
border:2px solid #000000 ;
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
div>span{
color: #000000;
font-size: 16px;
line-height: 20px;
position: absolute;
top: 273px;
left: 633px;
width: 888px;
margin-bottom: 50px;
text-decoration: underline;
color: #001E50;
}
