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， 点击可查看效果

src="https://yikeapi.com/temp/olympic"

4. 最终效果图

PHP对接2020年东京奥运会奖牌榜API接口的更多相关文章

  1. 快递鸟顺丰物流api接口对接多种方法整理

    目前很多自营电商平台.ERP系统.仓储系统.快递柜企业,对物流模块数据需求还是比较旺盛的.之前有介绍过简单的接口对接方法,这次给大家整理介绍两种快递数据的获取方法. 接口秘钥可以向顺丰公司申请,或者一 ...

  2. php后台对接ios，安卓，API接口设计和实践完全攻略，涨薪必备技能

    2016年12月29日13:45:27    关于接口设计要说的东西很多,可能写一个系列都可以,vsd图都得画很多张,但是由于个人时间和精力有限,所有有些东西后面再补充   说道接口设计第一反应就是r ...

  3. .NetCore对接各大财务软件凭证API——金蝶系列（1）

    哈喽,又和大家见面了,虽然看文章的小伙伴不多,但是我相信总有一天,自己写的这些文章或多或少会对其他人有些帮助,让他们在相关的业务开发下能少走些弯路,那我的目的就达到了,好了,今天就正式开始我们的系列了 ...

  4. .NetCore对接各大财务软件凭证API——用友系列（1）

    一.前言 今天,我们转战用友系列的第一个产品---T+/Tplus.前两篇文章讲解分享的都是金蝶的产品,因为本身公司牵涉的业务有限,后续有金蝶其他产品的API对接业务时,会继续来分享经验. T+的AP ...

  5. .NetCore对接各大财务软件凭证API——用友系列（2）

    一. 前言 今天我们继续来分析用友系列的第二个产品--U8Cloud2.5 ,apilink方式的API.官网的API文档地址如下:U8API文档 因为我们主要是凭证对接,所以使用到的模块有总账.基础 ...

  6. .NetCore对接各大财务软件凭证API——用友系列（3）

    一. 前言 由于前段时间项目比较集中,所以停更了好久,终于来到我们用友的系列产品3---U8Cloud2.7了. 一,2.7和2.5的api方式有什么区别? 1.2.7版本以后可以直接使用u8c登入地 ...

  7. 【磐河旅行】之酒店API接口对接实录

    1.项目需求概述: 通过对接第三方磐河旅行的酒店API接口实现在我们的APP .微信小程序.H5上可提供用户酒店查询.酒店预订.退订等功能.效果如下图: 2.酒店接口功能拆分 除了酒店静态数据字典(如 ...

  8. API接口的安全设计验证—ticket，签名，时间戳

    概述 与前端对接的API接口,如果被第三方抓包并进行恶意篡改参数,可能会导致数据泄露,甚至会被篡改数据,我主要围绕时间戳,token,签名三个部分来保证API接口的安全性 1.用户成功登陆站点后,服务 ...

  9. 快递Api接口 & 微信公众号开发流程

    之前的文章,已经分析过快递Api接口可能被使用的需求及场景:今天呢,简单给大家介绍一下微信公众号中怎么来使用快递Api接口,来完成我们的需求和业务场景. 开发语言:Nodejs,其中用到了Neo4j图 ...

  10. 面向对象的全套“企业微信”api接口的代码实现，网上太多“面向过程”微信api接口的代码，这个开源给需要的人用

    有段时间没有写文章了. 一直以来,微信的热门是看得到的,很多人都需要与微信的api对接. 今天我这里就分享全套的企业微信api接口的代码. 关于微信api,网上已经有很多实现的了. 但是我今天之所以还 ...

随机推荐

  1. TensorFlow 基础 (01)

    以前都自嘲什么码农, 搬砖啥的, 倒不如 "工具人" 这个词更加贴切. 我现在就是一个完完全全的工具人. 上班真的是没有太大乐趣, 如果不下班后培养自己的兴趣爱好, 或者技术精进的 ...

  2. WPF placeHolder效果的样式设定

    <UserControl x:Class="wpfTestStudio.textPlaceHolderDemo" xmlns="http://schemas.mic ...

  3. odoo16里面修改tree视图样式

    一.在static文件夹下新建一个css文件夹并将*.css文件写入 /*该文件用来定义视图中的一些格式,需要用到的地方直接在xml文件中进行引用*/ /*语法说明*/ /* table th:nth ...

  4. java原生链利用

    java原生链利用 在上一个文章中我们利用Java原生链进行shiro的无依赖利用; 针对在没有第三方库的时候,我们该如何进行java反序列化; 确实存在一条不依赖第三方库的java反序列化利用链;但 ...

  5. Hexo-butterfly 接入腾讯混元大模型自动生成文章摘要(保姆教程)

    1.注册腾讯云账号 首先必须要有一个腾讯云的账号,没有的话在官网注册一个,注册完成之后,进行实名操作. 接下来,在产品中心搜索腾讯混元大模型,点击产品控制台进入,在模型广场选择自己想要的大模型 (复制 ...

  6. 阿里微服务解决方案-Alibaba Cloud之负载均衡（Feign）（五）

    一.基于 Feign 的负载均衡 OpenFeign 提供的负载均衡很简单,只需要将相同服务的名称保持一致,并在 Feign Client 的Service中指定名称即可. 例如:希望将端口号8000 ...

  7. 不写代码，让 AI 生成手机 APP！保姆级教程

    你现在看到的 APP,是我完全用 AI 生成的,一行代码都没写!怎么做到的呢? 大家好,我是程序员鱼皮.AI 发展很快,现在随随便便就能生成一个网站,但是怎么纯用 AI 开发能在手机上运行的 APP ...

  8. 模块与包&相对绝对路径

    [一]模块与包 (1)什么是模块 在Python中,一个py文件就是一个模块,文件名为xxx.py模块名则是xxx,导入模块可以引用模块中已经写好的功能. (2)模块的来源 内置的:python解释器 ...

  9. hot100之二分查找

    搜索插入位置(035) class Solution { public int searchInsert(int[] nums, int target) { int n = nums.length; ...

  10. hot100之二叉树下

    二叉树的右视图(199) class Solution { List<Integer> res = new ArrayList<>(); public List<Inte ...