前言

产生这样的想法是因为总是看到各种各样的地方写着api，但是又不知道是什么干什么的。又看到了CodeForces提供的api，所以拿来练手，发现挺有意义的，所以准备做下去，慢慢完善功能的同时提升自己能力。
PS：博主前端纯小白，过程的艰辛自己体会233.

本站源码已上传至GitHub: https://github.com/Drew233/INFO-CF
欢迎大家提issues，反馈bug或跟我一起完善本站功能

前端

主页

主页模板源自：https://html5up.net/

个人信息

已优化

比赛信息

关于我

功能

已实现

通过user.info的调用实现简单的竞赛数据显示

主要代码

<script src="https://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function (){
      $("#btn382").click(function(){
      var str="";
      var x=  document.getElementById("input");
      var curl="https://codeforces.com/api/user.rating?handle="+x.value;
      var buttonstyle="";
      jQuery.support.cors = true;
      $.ajax({
         url: curl,
         dataType: 'json',
         success: function( end ) {
           var mid = end.result;
           var link="https://codeforces.com/contest/";
           for(var i=0;i<mid.length;i++){
                 str+="<a href="+link+mid[i].contestId+" class="+buttonstyle+">"+(mid[i].contestId+"</a>"+"\n");
           }
           document.getElementById("div381").innerHTML="";
           document.getElementById("main").innerHTML="比赛清单"+str;
           document.getElementById("num").innerHTML="至今你以参加"+mid.length+"场比赛";
         },
         error: function( end ) {
           alert( "ERROR:  " + "输入用户名错误，请重新输入" );
         }
       });
        });
    });
  </script>

通过ajax调用api，返回json数据，然后通过document.getElementById("").innerHTML="";在html中相应位置添加对应元素。

待实现

Rating相关

赛事相关（如近期赛事）

笔记

上传文件至已有文件的GitHub仓库

  1. git add .
  2. git commit -m "提交注释"
  3. git pull origin master
  4. git push -u origin master

关于移动端的适配

width和height属性可以通过相对大小来适应屏幕大小
或者直接使用auto

调用api中的json

可以使用getjson或者ajax，getjson更简单快捷，ajax麻烦一点但是功能更详细。

赏