2020年东京奥运会奖牌榜查询, 该接口5分钟更新一次, 免费请求, 对接简单, 底部带效果图
成本网页以为大家做好， 可用iframe引入到自己网站或直接跳转， 不加任何广告
1. PHP代码部分
/**
* 奥运会榜单， 对接易客api接口，可自行注册
* 文档地址 https://yikeapi.com/index/olympic
*/
public function olympicAction()
{
$url = 'http://apia.yikeapi.com/olympic/?appid=43656176&appsecret=I42og6Lm';
$json = json_decode(file_get_contents($url), true);
//print_r($json);
$i = 1;
foreach ($json['list'] as $key => $val){
$json['list'][$key]['num'] = $i;
$i++;
}
$this->assign['list'] = $json['list'];
echo $this->twig->render('temp/olympic.twig', $this->assign);
}
2. 模板部分， 使用的是twig
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="yikeapi.com">
<title>2020年东京奥运会奖牌榜</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
table{font-size: 14px;}
.table td, .table th{padding: .5rem;}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">名次</th>
<th scope="col">国家/地区</th>
<th scope="col" style="text-align: center"><svg t="1627348169831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1334" width="25" height="25"><path d="M337.175 0H162.375l249.8 449.6h174.8L337.175 0z" fill="#E64A19" p-id="1335"></path><path d="M686.875 0L437.075 449.6H611.875L861.675 0H686.875z" fill="#FF754C" p-id="1336"></path><path d="M586.975 449.6l-1.7-3.3-1.7 3.3h3.4zM482.775 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z" fill="#C93D18" p-id="1337"></path><path d="M511.975 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z" fill="#FFBA57" p-id="1338"></path><path d="M511.975 974c-137.9 0-249.8-111.8-249.8-249.8s111.8-249.8 249.8-249.8 249.8 111.8 249.8 249.8c-0.2 138-111.9 249.7-249.8 249.8z m-74.9-174.8v50h149.9v-50h-50V649.4h50v-50H437.075v50h50v149.9h-50z" fill="#FFE082" p-id="1339"></path></svg></th>
<th scope="col" style="text-align: center"><svg t="1627348197356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1545" width="25" height="25"><path d="M337.2 0H162.3l249.8 449.6h174.8L337.2 0z" fill="#E64A19" p-id="1546"></path><path d="M686.8 0L437.1 449.6h174.8L861.7 0H686.8z" fill="#FF754C" p-id="1547"></path><path d="M586.9 449.6l-1.7-3.3-1.7 3.3h3.4zM482.7 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z" fill="#C93D18" p-id="1548"></path><path d="M512 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z" fill="#9FA8DA" p-id="1549"></path><path d="M487 649.4h50v149.9h-50z" fill="#C5CAE9" p-id="1550"></path><path d="M512 974c-137.9 0-249.8-111.8-249.8-249.8S374.1 474.5 512 474.5s249.8 111.8 249.8 249.8C761.6 862.2 649.9 973.9 512 974zM387.1 799.2v50h249.8v-50h-50V649.4h50v-50H387.1v50h50v149.9h-50z" fill="#C5CAE9" p-id="1551"></path></svg></th>
<th scope="col" style="text-align: center"><svg t="1627348205749" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1811" width="25" height="25"><path d="M337.2 0H162.3l249.8 449.6h174.8L337.2 0z" fill="#E64A19" p-id="1812"></path><path d="M686.8 0L437.1 449.6h174.8L861.7 0H686.8z" fill="#FF754C" p-id="1813"></path><path d="M586.9 449.6l-1.7-3.3-1.7 3.3h3.4zM482.7 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z" fill="#C93D18" p-id="1814"></path><path d="M512 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z" fill="#AF8A77" p-id="1815"></path><path d="M512 974c-137.9 0-249.8-111.8-249.8-249.8S374.1 474.5 512 474.5s249.8 111.8 249.8 249.8C761.6 862.2 649.9 973.9 512 974zM337.2 799.2v50h349.7v-50h-50V649.4h50v-50H337.2v50h50v149.9h-50z" fill="#CEB1A1" p-id="1816"></path><path d="M537 649.4h50v149.9h-50zM437.1 649.4h50v149.9h-50z" fill="#CEB1A1" p-id="1817"></path></svg></th>
<th scope="col" style="text-align: center">总数</th>
</tr>
</thead>
<tbody>
{% for item in list%}
<tr>
<th scope="row">{{ item.num }}</th>
<td><img src="{{ item.flag }}" style="width: 22px; height: 22px; border-radius: 50%; padding-right: 5px;" />{{ item.country }}</td>
<td style="text-align: center">{{ item.jin }}</td>
<td style="text-align: center">{{ item.yin }}</td>
<td style="text-align: center">{{ item.tong }}</td>
<td style="text-align: center">{{ item.total }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
3. iframe引入网址， 自适应H5， 点击可查看效果
4. 最终效果图
