linch
/
www.x-motion.cn


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>最快单圈</title>
    <link rel="stylesheet" type="text/css" href="/Public/static/home/css/circle.css"/>
    <style>
        .pos{
            width: 22.07%;
        }
        .racer{
            width: 26.36% ;
        }
        .car_name{
            width: 28.06%;
        }
        .time{
            width: 23.33%;
        }
    </style>
</head>

<body>
<div class="title">
    <img src="https://img.x-motion.cn/home/image/leaderboard/title_left.png" />
    <img src="https://img.x-motion.cn/home/image/leaderboard/title_center.png" />
    <img src="https://img.x-motion.cn/home/image/leaderboard/title_right.png" />
</div>
<div class="list">
    <div class="list_title list_ct">
        <div class="pos">排名</div>
        <div class="racer">车手</div>
        <div class="car_name">赛车</div>
        <div class="time">最快单圈</div>
    </div>
    <div class="list_contain"></div>
</div>
<script src="/Public/static/home/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var getHeight = function() {
        var img_w = 1058;
        var img_h = 521;
        var img_wh = img_h / img_w;
        var line_h = document.querySelector('.list_contain').clientWidth * img_wh / 10 + 'px';
        $('.list_li').css('height',line_h);
        $('.list_li').css('lineHeight', line_h);
    };
    var page_num_next = 1;
    $(document).ready(function() {
        getHeight();
        $(window).resize(function() {
            getHeight()
        });
        get_data(page_num_next);
    });
    function get_data (page_num){
        var page_size = 10;
        var data = {
            server_id: "{$server_id}",
            session: "{$session}",
            page_num: page_num,
            page_size: page_size
        };
        $.ajax({
            type: "get",
            dataType: "json",
            url: "{:U(CONTROLLER_NAME . '/fastest_lap',array(),true,true)}",
            data: data,
            success: function (data) {
                if (data.code == 1000) {
                    count = data.data.count;
                    if(count == 0 && page_num_next == 1){
                        setTimeout("get_data(page_num_next)", 10000);
                        return 0;
                    }
                    if(count == 0){
                        page_num_next = 1;
                        get_data(page_num_next);
                        return;
                    } else if(count < page_size) {
                        page_num_next = 1;
                    } else {
                        page_num_next = page_num_next+1;
                    }
                    var items = data.data.items;
                    var i;
                    var lap_html = '';
                    for(i in items){
                        lap_html =  lap_html + get_lap_html(items[i].pos,items[i].laps,items[i].time,items[i].racer,items[i].icon,items[i].name,items[i].car_name);
                    }
                    $(".list_contain").css('opacity',0).html(lap_html).animate({'opacity':'1'},500);
                    getHeight();
                    setTimeout("get_data(page_num_next)", 10000);
                    getHeight();
                }
            }
        });
    }

    function get_lap_html(pos, laps, time, racer, icon, name, car_name) {
        var html = '<div class="list_li list_ct">' +
                '<div class="pos">' + pos + '</div>' +
                '<div class="racer"><img src="' + icon + '" />' + name + '</div>' +
                '<div class="car_name">' + car_name + '</div>' +
                '<div class="time">' + time + '</div>' +
                '</div>';
        return html;
    }
</script>
</body>

</html>