CF赛事赛程接入

赛事官网展现各个战队比赛时间（分为两种：有赛事分类、无赛事分类）

1. 找到对应赛事的生成数据

2. 引入需要的js

    <script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js"></script>
   

3.添加对应的css（css也可以根据实际需要进行修改）

    .loading{position:absolute;left: 0;top:48%;width: 100%;height: 100%;color: #666666;text-align:center;font-size: 12px;}
.schedule-box{width:1000px;margin:0 auto;}
.wpbox{height:247px;width:1000px;position: relative}
.wpbox-nav{ width: 1000px; height: 51px; padding: 38px 0; position: relative;}
.wpbox-nav ul li{width: 200px; height: 50px; line-height: 50px; overflow: hidden;border-bottom: 1px solid #b5b5b5; text-align: center; color: #3b3b3b; font-size: 18px; float: left;cursor: pointer; position: relative;}
.wpbox-nav ul li:before{content: ''; width: 1px; height: 15px; background-color: #b5b5b5; position: absolute; top: 19px; right: 0px;}
.wpbox-nav ul li:nth-of-type(5n+0):before{ display: none; }
.wpbox-nav ul li.on{ color: #2e6cb3; font-weight: bold; }
.wpbox-nav i{ display: block; width: 200px; height: 1px; position: absolute; left: 0; bottom: 38px; background-color: #2e6cb3;}
.wpbox-nav i span{ display: block;border: 2px solid #2e6cb3;padding: 2px; width: 3px; height: 3px;transform: rotate(45deg);margin: -5px auto 0;}
.wpbox-nav i span em{ display: block; width: 3px; height: 3px; background-color: #2e6cb3;}
.btn, .list-box1-items li, .lsb_part2, .sp{ background:url(//game.gtimg.cn/images/cf/cp/a20180710cfpl/com.png) no-repeat;}
.wpbox .prev,.wpbox .next{width:48px;height:55px;top:80px;z-index:10;position:absolute;}
.wpbox .prev{left:-60px;background-position:-515px -234px;}
.wpbox .next{right:-60px;background-position:-577px -234px;}
.list_box {height: 260px;position: relative;width: 1000px;overflow: hidden;padding-top: 5px;}
.list-box-items li{width: 230px;height: 245px;float: left;margin: 0 10px;position: relative;box-shadow: 1px 0 10px #edebeb, 0 1px 10px #edebeb;_display: inline; background-position: 0px 0px;}
.lsb_part1{width: 230px;height: 90px;}
.lsb_part1 p{ font-size: 20px;text-align: center;line-height: 26px;padding-top: 14px;}
.lsb_part1 p span{font-weight: bold;}
.lsb_part1 p.ys_p{color: #cccccc;font-size: 14px;padding-top: 0; width: 80px; height: 19px; line-height: 19px; text-align: center;margin: 10px auto 0;border: 1px solid #cccccc;border-radius: 100px;}
.lsb_part2{width: 230px;height: 108px;position: relative;text-align: center;font-weight: bold;font-size: 33px;line-height: 62px;color: #333333; background-position: -686px -227px;}
.lsb_part2 .lp2_l,.lsb_part2 .lp2_r{width: 95px;height: 108px;position: relative;}
.lsb_part2 .lp2_l{float:left;}
.lsb_part2 .lp2_r{float:right;}
.lsb_part2 .lp2_l img,.lsb_part2 .lp2_r img{width: 38px;height: 38px;display: block;margin: 18px auto 0px;}
.lsb_part2 .lp2_l p,.lsb_part2 .lp2_r p{color: #2e6cb3;text-align: center;font-size: 12px;font-weight: normal;line-height: 18px;}
.lsb_part2 .lp2_l p{color: #bb2517; line-height: 30px;}
.lsb_part2 .lp2_r p{line-height: 30px;}
.lsb_part2 .lp2_r img{ margin: 0 auto 0;}
.lsb_part2 .lp2_l span,.lsb_part2 .lp2_r span{width: 30px;height: 40px;position: absolute;font-size: 26px;color: #fff;text-align: center;line-height: 37px;font-weight: bold;}
.lsb_part2 .lp2_l span{right: -10px;top: 16px;}
.lsb_part2 .lp2_r span{left: -10px;top: 29px;}
.lsb_part3{width: 230px;text-align: center; font-size: 0;}
.lsb_part3 a{width: 74px;height: 26px;display: inline-block;border: 1px solid #666666;text-align: center;line-height: 25px;color: #666666;margin: 0 6px; font-size: 14px; border-radius: 2px;}
/* 进行中 */
.list-box-items li.type1{  background-position: 0px -554px;}
/* 即将开启 */
.list-box-items li.type2{ background-position: 0 -274px;}

3.添加html结构（demo文件的html结构（有注释），id可以自定义）

4.实例化组件

    <script src="//cf.qq.com/act/a20161202docs/doc/schedule.js"></script>
 var schedule1 = new schedule({
        data: matchList,  //js数据对象
        time:['2018-07-22 00:00:00','2018-09-09 00:00:00','2018-09-16 00:00:00','2018-10-07 00:00:00','2018-10-21 00:00:00'],  //时间段
        matchlistObj:'list-box-items',   //赛事展示对象
        matchtypeObj:'nav_box',    //赛事类型对象
        matchtypeObj_w: 250,             //list 宽度 默认250
        navHover_w: 200,                 //nav hover状态宽度  默认200   
        list_num: 4,                     //展现比赛个数 默认4
        isShowType:0        //是否展现赛程分类 0不显示  1显示
    })

案例地址