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. OpenDeepWiki一分钟即可让您的仓库自动生成精美文档

    引言 还在为编写详尽的项目文档而头疼吗?是否曾经面对一个陌生的代码仓库,却不知从何下手理解其结构和逻辑?在软件开发的世界里,高质量文档就像一张详细的地图,引导开发者穿越复杂代码的迷宫.然而,编写这样的 ...

  2. 信息资源管理综合题之“SPD属于知识管理工具那一类 与 管理工具与知识库的区别 以及 使用知识地图是否可以用SynchroFLOW替代”

    一.案例:1995年10月,微软开发了一项"技能规划与开发(SPD)"的计划,他们把每个系统开发人员的工作能力和这些特定工作需要的知识制作成地图,让那个员工与团队间的配合更加默契, ...

  3. HMM - (补充) 参数求解之 F/B 算法细节

    回顾 上篇通过EM算法思想来求解 HMM 的参数 \(\theta=(\pi, A,B)\) 即 初始状态概率(向量), 状态转移概率(矩阵), 发射概率矩阵. 在上帝视角, 即已知隐变量 Z , 则 ...

  4. JS如何实现远程控制：一步步教你掌握技术

    @charset "UTF-8"; .markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; o ...

  5. CentOS、Ubuntu安装jdk11方法

    CentOS: sudo yum install java-11-openjdk -y Ubuntu sudo apt-get install openjdk-11-jre -y 检查版本: java ...

  6. ChatterBot人工智能，聊天机器人，无坑指南（安装，使用）（2.使用篇）

    上一篇(安装):https://www.cnblogs.com/Ctrl-cCtrl-v/p/13220584.html 基础代码: 1 from chatterbot import ChatBot ...

  7. MySQL-Canal-Kafka数据复制详解

    摘要 MySQL被广泛用于海量业务的存储数据库,在大数据时代,我们亟需对其中的海量数据进行分析,但在MySQL之上进行大数据分析显然是不现实的,这会影响业务系统的运行稳定.如果我们要实时地分析这些数据 ...

  8. 你应该懂的AI 大模型（五）之 LangChain 之 LCEL

    本文 对<LangChain>一文中的 Chain 与 LCEL 部分的示例进行详细的展示. 先回顾下 在LangChain框架中,Chain(链) 和 LCEL(LangChain Ex ...

  9. python开发之路【第一章】：计算机基础结构

    1.1计算机基础 1.1.1 硬件 1944年,美籍匈牙利数学家冯·诺依曼提出计算机基本结构. 五大组成部分:运算器.控制器.存储器.输入设备.输出设备. -- 运算器:按照程序中的指令,对数据进行加 ...

  10. 【前端AI实践】Lingma：使用工具辅助开发让你停不下来

    如果你用过 GitHub Copilot,那你对 AI 编程助手应该不陌生.而 Lingma 是阿里云推出的一款专注于编程场景的智能编码助手. 它深度集成在 VS Code.JetBrains 等主流 ...