ScrollBoard.js
ACM竞赛滚动榜单展示插件

之前出去比赛,看到颁奖的时候的滚榜效果,看起来很炫酷,就一直想写一个,现在终于有时间去写了。可惜的是没法用在自己主持的两次校内比赛上,不过可以留给下次校赛用。有什么修改建议欢迎留言~

已在ACM团队期末选拔赛使用,过了把瘾~

 

插件介绍

ACM竞赛颁奖揭榜时的滚榜展示插件,基于JQuery、Bootstrap

展示页面:Demo

按一次回车(可自行指定)可进行一步,即更新一个队的一个未知结果

Demo里的数据是西南科技大学第十二届校赛的数据,因为队伍实力差距比较大,可能滚榜的观赏性不强,以后有更好的数据会换掉

 

V 1.0.0 (2016-07-02)

实现了基本的滚榜展示功能

 

使用方法

example

由于展示效果需要,请使用空页面

new Board(problemCount, medalCounts, startTime, freezeBoardTime) Borad类构造方法:参数依次为题目数、奖牌数数组(分别为金银铜)、比赛开始时间、比赛封榜时间

Board.showInitBoard() 方法:展示封榜时榜的状态

Board.keydown() 方法:滚榜时的一步操作,即更新一个队的一个未知结果

StringToDate(s) 方法:"yyyy-mm-dd hh:mm:ss"格式字符串转Date对象

 

获取数据

JS文件中的 getSubmitList() 和 getTeamList() 方法分别为获取提交数据和获取队伍数据,请根据后台JSON数据格式自行修改,代码内有详细的注释说明

(感觉这个有点麻烦,以后会修改为更方便的方式)

 

GitHub

GitHub项目地址:https://github.com/qinshaoxuan/ScrollBoard.js

求star~

 

 

Categories: 个人作品