【小5聊】使用div+css布局绘制32支球队比赛对阵图，拭目以待冠军花落谁家

全栈小5

已于 2022-12-19 14:21:34 修改

阅读量3.6k

点赞数 3

文章标签：程序人生

于 2022-12-03 13:28:11 首次发布

本文链接：https://blog.csdn.net/lmy_520/article/details/128146397

版权

虽然不是狂爱足球爱好者，但多少会有关注下，像梅西和C罗是经常听到的

可能是没有我们队的原因，关注会比较少，只看个结果，所以

趁着这次机会，通过js前端技术div+css布局方式绘制本次世界杯足球比赛对阵图

世界杯圆满结束，祝贺阿根廷梅西夺冠，预测成功

2022年12月04日 14:23:59 预测冠军图，让我们为梅西圆梦吧

2022年卡塔尔世界杯是第二十二届世界杯足球赛，当地时间 2022年11月20日至 2022年12月18日

一、足球信息

可能有些小伙伴对足球一些信息不太了解，下面将简单说下足球世界杯相关信息

1、32强分组

1）通过六大赛区预选赛产生32支球队，各个赛区名额不同

2）东道主，不用参与预选赛，所以还有31个名额

3）32强分为8个小组，每个小组固定4支球队，命名A~H组

2、 16强分组

1）每个小组的前2名进入16强

2）分组

A组第一 PK B组第二，产生胜者1

B组第一 PK A组第二，产生胜者2

C组第一 PK D组第二，产生胜者3

D组第一 PK C组第二，产生胜者4

E组第一 PK F组第二，产生胜者5

F组第一 PK E组第二，产生胜者6

G组第一 PK H组第二，产生胜者7

H组第一 PK G组第二，产生胜者8

3、8强分组

1）胜者1 PK 胜者3，产生胜者A

2）胜者2 PK 胜者4，产生胜者B

3）胜者5 PK 胜者7，产生胜者C

4）胜者6 PK胜者8，产生胜者D

4、4强分组

1）胜者A PK 胜者C

2）胜者B PK 胜者D

5、冠亚军

1）4强中，获胜的两队进入决赛

2）4强中，输的两队争夺第三名

二、编码绘制赛程图

根据上面规则，可通过div+css+js方式布局绘制出对阵比赛图

1、左右两边分组设置4个小组

2、主要以相对布局方式，按一定规律进行排序

个人觉得，通过规则去锻炼自己的布局和编码逻辑也是蛮不错的，还能参与到和世界杯相关活动里，也是一件不错的事情

3、代码优化

刚开始做的时候，可能会写的比较啰嗦，做到后面当代码很多的时候，就可以考虑提取公共部分，从而减少代码量，比如：刚开始代码两是976行，第一次优化还剩425行，节省了1倍多。

优化前

优化后

温馨提示：图片到时会上传到CSDN

完成代码如下


<meta charSet="utf-8" />
<script src="jquery.min.js"></script>

<style type="text/css">
    .img-div { width: 36px; height: 24px; border: 1px solid #ccc; position: absolute; }
        .img-div .img { width: 100%; height: 100%; }
        .img-div .img2 { width: 18px; height: 18px; margin-top: 3px; margin-left: 9px; }
    .shadwo { box-shadow: 0 0 13px #ccc; }
    .left-group-div { position: absolute; left: -105px; width: 100px; height: 24px; line-height: 24px; font-size: 12px; text-align: right; }
    .right-group-div { position: absolute; right: -108px; width: 100px; height: 24px; line-height: 24px; font-size: 12px; }
    .left-div { position: absolute; left: 43px; width: 100px; height: 24px; line-height: 24px; font-size: 13px; }
    .right-div { position: absolute; right: 43px; width: 100px; height: 24px; line-height: 24px; font-size: 13px; text-align: right; }

    /*圆*/
    .circular-div { position: absolute; top: 300px; left: 800px; width: 0px; height: 200px; border-radius: 200px; border: 2px solid #099dff; }
</style>

<div style="padding: 20px 60px; width: 1600px; height: 630px; margin: 0 auto; margin-top: 30px; box-shadow: 0 0 13px #ccc; ">
    <div id="div" style="position: relative;">

    </div>
</div>

<!--32支球队信息-->
<div id="inputDiv" style="display:none;">
    <input type="hidden" data-group="A组" data-name="塞内加尔" data-src="images/5409f8cd1d7c3d4fc52c3c73d8f4d748.png" />
    <input type="hidden" data-group="A组" data-name="荷兰" data-src="images/e449bde913469bca9c7478ec17d2fe6c.png" />
    <input type="hidden" data-group="A组" data-name="厄瓜多尔" data-src="images/f7fbe426deae24a394e516e5991c63af.png" />
    <input type="hidden" data-group="A组" data-name="卡塔尔" data-src="images/20d6af801cec5aadd82c4da763648daa.png" />

    <input type="hidden" data-group="B组" data-name="威尔士" data-src="images/3ad99a9c186a78be12852a2c1e1b0e53.png" />
    <input type="hidden" data-group="B组" data-name="英格兰" data-src="images/e80b5eececdfb64fbb50aa0c8c366861.png" />
    <input type="hidden" data-group="B组" data-name="伊朗" data-src="images/79bc4fe4b02ad0544af9f2a8fbbe02e1.png" />
    <input type="hidden" data-group="B组" data-name="美国" data-src="images/19f0d6e267727f9846559d420a2068a6.png"/>

    <input type="hidden" data-group="C组" data-name="波兰" data-src="images/636392ea158aa3afb9c47949364b888e.png" />
    <input type="hidden" data-group="C组" data-name="阿根廷" data-src="images/ca4718053280290ad49d44d67ca97743.png" />
    <input type="hidden" data-group="C组" data-name="墨西哥" data-src="images/82e8ef2732cf8ea2554fad9a99a712fd.png" />
    <input type="hidden" data-group="C组" data-name="沙特" data-src="images/b3b1f269a39ef3b5b1700a854902eb8b.png" />

    <input type="hidden" data-group="D组" data-name="突尼斯" data-src="images/5f801ce25d4e64977ff65e297e82c81a.png" />
    <input type="hidden" data-group="D组" data-name="法国" data-src="images/cf81fe2ec21bfebf376ca1bfcee07b23.png" />
    <input type="hidden" data-group="D组" data-name="澳大利亚" data-src="images/9c6ae919870434634765897f52ca26b1.png" />
    <input type="hidden" data-group="D组" data-name="丹麦" data-src="images/e3c72eaf6d6ec0e992035072e762d519.png" />

    <input type="hidden" data-group="E组" data-name="日本" data-src="images/aaa5b59dabdb134ef29be5d2606ce759.png" />
    <input type="hidden" data-group="E组" data-name="西班牙" data-src="images/423b6f44c2672d58086b04ac39ae15e5.png" />
    <input type="hidden" data-group="E组" data-name="哥斯达黎加" data-src="images/e8c90529adf8a4bc6fef5a52fec9149a.png" />
    <input type="hidden" data-group="E组" data-name="德国" data-src="images/635f433e3db5cff4f103ef6f79044195.png" />

    <input type="hidden" data-group="F组" data-name="克罗地亚" data-src="images/160422fb015875d37b44c1250c25a968.png" />
    <input type="hidden" data-group="F组" data-name="加拿大" data-src="images/b57067797fdbe0ebed243460195b2298.png" />
    <input type="hidden" data-group="F组" data-name="比利时" data-src="images/794d8863eb276713c481c3398736b06e.png" />
    <input type="hidden" data-group="F组" data-name="摩洛哥" data-src="images/06c2200f0d780e6c45fe1b85a35ceca5.png" />

    <input type="hidden" data-group="G组" data-name="巴西" data-src="images/b06748a153a355351a271eebbaad33d0.png" />
    <input type="hidden" data-group="G组" data-name="喀麦隆" data-src="images/3bebc6f2dad9f027ac176272442ba530.png" />
    <input type="hidden" data-group="G组" data-name="瑞士" data-src="images/be6980d6afd68c698d92dd85b00ac35e.png" />
    <input type="hidden" data-group="G组" data-name="塞尔维亚" data-src="images/173de8171422a2e07c0a8b7138728133.png" />

    <input type="hidden" data-group="H组" data-name="韩国" data-src="images/a6f50eeb6923fc95feb1878d7e9c83c5.png" />
    <input type="hidden" data-group="H组" data-name="葡萄牙" data-src="images/823e147f8bde4fef13f26aeeb9d7e691.png" />
    <input type="hidden" data-group="H组" data-name="加纳" data-src="images/42a039c1519755b611ba84130284e516.png" />
    <input type="hidden" data-group="H组" data-name="乌拉圭" data-src="images/012c08a106961a36b8f740e558bb9c6a.png" />
</div>

<script type="text/javascript">
    // ===分组和对阵图===
    $(function () {
        var line = $('<div class="circular-div"></div>');
        //$('#div').append(line);
        line.animate({ width: "200px" }, 5000);

        // 初始化球队值
        var teamData = {}
        $('#inputDiv input').each(function () {
            var group = $(this).attr('data-group');
            var name = $(this).attr('data-name');
            var src = $(this).attr('data-src');
            teamData[name] = { group: group, name: name, src: src };
        });

        // 公共变量
        var height = 36;
        var paddingBottom = 5;

        // 公共创建div方法
        function createDiv(currentName, arrow) {
            var div = $('<div></div>');
            div.addClass('img-div shadwo');
            var data = teamData[currentName];
            var group = data != undefined ? data.group : '';
            var name = data != undefined ? data.name : currentName;
            var src = data != undefined ? data.src : '';
            div.append('<div class="' + arrow +'-div">' + name + '</div>');
            if (name == "待定") {
                div.append('<img class="img2" src="wenhao.png" />');
            }
            else {
                div.append('<div class="' + arrow + '-group-div">' + group + '</div>');
                div.append('<img class="img" src="' + src + '" />');
            }

            return div;
        }
        function getTop(i, type) {
            var top = 0;
            if (i == 0) {
                top = height + paddingBottom;
            }
            else if (i == 1) {
                top = (i + 1) * height + paddingBottom;
            }
            else if (i == 2) {
                top = (i + 3) * height + (i + 3) * paddingBottom;
            }
            else if (i == 3) {
                top = (i + 3) * height + (i + 2) * paddingBottom;
            }
            else if (i == 4) {
                top = (i + 5) * height + (i + 5) * paddingBottom;
            }
            else if (i == 5) {
                top = (i + 5) * height + (i + 4) * paddingBottom;
            }
            else if (i == 6) {
                top = (i + 7) * height + (i + 7) * paddingBottom;
            }
            else if (i == 7) {
                top = (i + 7) * height + (i + 6) * paddingBottom;
            }

            if (type == 4) {
                if (i == 0) {
                    top = height + (height + paddingBottom) / 2 + 10;
                }
                else if (i == 1) {
                    top = (i + 4) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
                }
                else if (i == 2) {
                    top = (i + 7) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
                }
                else if (i == 3) {
                    top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
                }
            }

            return top;
        }

        // ===A~D组===
        var flagArrLeft = ['塞内加尔', '荷兰', '厄瓜多尔', '卡塔尔', '威尔士', '英格兰', '伊朗', '美国', '波兰', '阿根廷', '墨西哥', '沙特', '突尼斯', '法国', '澳大利亚', '丹麦'];
        for (var i = 0, j = 0; i < 16; i++) {
            var div = createDiv(flagArrLeft[i], "left");
            if (i % 4 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:10px;left:108px;width:10px;height:118px;" />');
                if (i > 0) {
                    j++;
                }
            }
            var top = j * 20;
            div.css({ "top": (i * height + paddingBottom + top) + "px", "left": "0px" });
            $('#div').append(div);
        }

        var leftTwoArr = ['荷兰', '塞内加尔', '英格兰', '美国', '阿根廷', '波兰', '法国', '澳大利亚'];
        for (var i = 0, j = 0; i < 8; i++) {
            var div = createDiv(leftTwoArr[i], "left");

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:5px;height:59px;" />');
                j++;
            }

            var top = getTop(i);

            div.css({ "top": top + 3 + "px", "left": "150px" });
            $('#div').append(div);
        }

        var leftThreeArr = ['荷兰', '美国', '阿根廷', '澳大利亚', '日本', '克罗地亚', '巴西', '韩国'];
        for (var i = 0, j = 0; i < 8; i++) {
            var div = createDiv(leftThreeArr[i], "left", 'time');

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:5px;height:59px;" />');
                j++;
            }

            var top = getTop(i);

            div.css({ "top": top + 3 + "px", "left": "300px" });
            $('#div').append(div);
        }

        var leftFourArr = ['荷兰', '阿根廷', '待定', '待定'];
        //leftFourArr = ['荷兰', '阿根廷', '克罗地亚', '巴西'];
        for (var i = 0, j = 0; i < 4; i++) {
            var div = createDiv(leftFourArr[i], "left");

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;left:108px;width:10px;height:180px;" />');
                j++;
            }

            var top = getTop(i, 4);

            div.css({ "top": top + "px", "left": "450px" });
            $('#div').append(div);
        }

        var leftFiveArr = ['待定', '待定']
        //leftFiveArr = ['阿根廷', '巴西']
        for (var i = 0; i < 2; i++) {
            var div = createDiv(leftFiveArr[i], "left");

            var top = 0;
            if (i == 0) {
                top = (i + 3) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
            }
            else if (i == 1) {
                top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
            }

            div.css({ "top": top + "px", "left": "600px" });
            $('#div').append(div);
        }

        var leftSixArr = ['待定'];
        //leftSevenArr = ['阿根廷'];
        for (var i = 0; i < 1; i++) {
            var div = createDiv(leftSixArr[i], "left");

            var top = 0;
            if (i == 0) {
                top = (i + 6) * (height + paddingBottom) + (height + paddingBottom) / 2;
            }

            div.css({ "top": top + "px", "left": "700px" });
            $('#div').append(div);
        }

        var leftSevenArr = ['待定'];
        //leftSevenArr = ['巴西'];
        for (var i = 0; i < 1; i++) {
            var div = createDiv(leftSevenArr[i], "left");

            var top = 0;
            if (i == 0) {
                top = (i + 9) * (height + paddingBottom) + (height + paddingBottom) / 2;
            }

            div.css({ "top": top + "px", "left": "700px" });
            $('#div').append(div);
        }
        // ===/A~D组===

        // ===E~H组===
        var flagArrRight = ['日本', '西班牙', '哥斯达黎加', '德国', '克罗地亚', '加拿大', '比利时', '摩洛哥', '巴西', '喀麦隆', '瑞士', '塞尔维亚', '韩国', '葡萄牙', '加纳', '乌拉圭'];
        for (var i = 0, j = 0; i < 16; i++) {
            var div = createDiv(flagArrRight[i], "right");

            if (i % 4 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:10px;right:108px;width:10px;height:118px;transform: rotateZ(180deg);" />');
            }
            if (i > 0 && i % 4 == 0) {
                j++;
            }
            var top = j * 20;
            div.css({ "top": (i * height + paddingBottom + top) + "px", "right": "0px" });
            $('#div').append(div);
        }

        var rightTwoArr = ['日本', '西班牙', '摩洛哥', '克罗地亚', '巴西', '瑞士', '葡萄牙', '韩国'];
        for (var i = 0, j = 0; i < 8; i++) {
            var div = createDiv(rightTwoArr[i], "right");

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:5px;height:59px;transform: rotateZ(180deg);" />');
                j++;
            }

            var top = getTop(i);

            div.css({ "top": top + "px", "right": "150px" });
            $('#div').append(div);
        }

        var rightThreeArr = ['英格兰', '塞内加尔', '法国', '波兰', '摩洛哥', '西班牙', '葡萄牙', '瑞士'];
        for (var i = 0; i < 8; i++) {
            var div = createDiv(rightThreeArr[i], "right");

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:5px;height:59px;transform: rotateZ(180deg);" />');
                j++;
            }

            var top = getTop(i);

            div.css({ "top": top + "px", "right": "300px" });
            $('#div').append(div);
        }

        var rightFourArr = ['待定', '待定', '待定', '待定'];
        //rightFourArr = ['英格兰', '法国', '西班牙', '葡萄牙'];
        for (var i = 0; i < 4; i++) {
            var div = createDiv(rightFourArr[i], "right");

            if (i % 2 == 0) {
                div.append('<img class="kuohao" src="kuohao.png" style="position:absolute;top:5px;right:108px;width:10px;height:180px;transform: rotateZ(180deg);" />');
                j++;
            }

            var top = getTop(i, 4);

            div.css({ "top": top + "px", "right": "450px" });
            $('#div').append(div);
        }

        var rightFiveArr = ['待定', '待定'];
        //rightFiveArr = ['法国', '葡萄牙'];
        for (var i = 0; i < 2; i++) {
            var div = createDiv(rightFiveArr[i], "right");

            var top = 0;
            if (i == 0) {
                top = (i + 3) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
            }
            else if (i == 1) {
                top = (i + 10) * (height + paddingBottom) + (height + paddingBottom) / 2 + 5;
            }

            div.css({ "top": top + "px", "right": "600px" });
            $('#div').append(div);
        }

        var rightSixArr = ['待定'];
        //rightSixArr = ['葡萄牙'];
        for (var i = 0; i < 1; i++) {
            var div = createDiv(rightSixArr[i], "right");

            var top = 0;
            if (i == 0) {
                top = (i + 6) * (height + paddingBottom) + (height + paddingBottom) / 2;
            }

            div.css({ "top": top + "px", "right": "700px" });
            $('#div').append(div);
        }

        var rightSevenArr = ['待定'];
        //rightSevenArr = ['法国'];
        for (var i = 0; i < 1; i++) {
            var div = createDiv(rightSevenArr[i], "right");

            var top = 0;
            if (i == 0) {
                top = (i + 9) * (height + paddingBottom) + (height + paddingBottom) / 2;
            }

            div.css({ "top": top + "px", "right": "700px" });
            $('#div').append(div);
        }
        // ===/E~H组===

        //$('.img').remove();
        //$('.left-div').html('');

        $('#div').append('<img src="first.png" style="position:absolute;top:200px;left:775px;width:50px;height:50px;" />');

        // 32强球队
        $('#div').append('<div style="position:absolute;top:-30px;left:0px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">32强球队</div>');
        $('#div').append('<div style="position:absolute;top:-30px;right:0px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">32强球队</div>');
        // 16强小组排名
        $('#div').append('<div style="position:absolute;top:10px;left:150px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">16强小组排名</div>');
        $('#div').append('<div style="position:absolute;top:10px;right:150px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">16强小组排名</div>');
        // 16强对阵球队
        $('#div').append('<div style="position:absolute;top:10px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">16强对阵球队</div>');
        $('#div').append('<div style="position:absolute;top:10px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">16强对阵球队</div>');
        $('#div').append('<div style="position:absolute;top:100px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-03 23:00</div>');
        $('#div').append('<div style="position:absolute;top:265px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-04 03:00</div>');
        $('#div').append('<div style="position:absolute;top:430px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-05 23:00</div>');
        $('#div').append('<div style="position:absolute;top:595px;left:300px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-06 03:00</div>');
        $('#div').append('<div style="position:absolute;top:100px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-05 03:00</div>');
        $('#div').append('<div style="position:absolute;top:265px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-04 23:00</div>');
        $('#div').append('<div style="position:absolute;top:430px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-06 23:00</div>');
        $('#div').append('<div style="position:absolute;top:595px;right:300px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-07 03:00</div>');
        $('#div').append('<div style="position:absolute;top:145px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-10 03:00</div>');
        $('#div').append('<div style="position:absolute;top:470px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-09 23:00</div>');
        $('#div').append('<div style="position:absolute;top:145px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-11 03:00</div>');
        $('#div').append('<div style="position:absolute;top:470px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-10 23:00</div>');
        $('#div').append('<div style="position:absolute;top:325px;left:600px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-14 03:00</div>');
        $('#div').append('<div style="position:absolute;top:325px;right:600px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">12-15 03:00</div>');
        $('#div').append('<div style="position:absolute;top:290px;left:760px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-18 23:00</div>');
        $('#div').append('<div style="position:absolute;top:350px;left:760px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">12-17 23:00</div>');
        // 8强对阵球队
        $('#div').append('<div style="position:absolute;top:33px;left:450px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">8强对阵球队</div>');
        $('#div').append('<div style="position:absolute;top:33px;right:450px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">8强对阵球队</div>');
        // 半决赛对阵
        $('#div').append('<div style="position:absolute;top:118px;left:600px;width:100px;height:30px;line-height:40px;text-align:left;font-size:12px;font-weight:bold;">半决赛对阵</div>');
        $('#div').append('<div style="position:absolute;top:118px;right:600px;width:100px;height:30px;line-height:40px;text-align:right;font-size:12px;font-weight:bold;">半决赛对阵</div>');
        // 决赛


        if (false) {
            // 冠军
            if (true) {
                var div = createDiv("阿根廷", "right");
                div.css({ "top": "170px", "left": "783px" });
                $('#div').append(div);
                $('#div').append('<div style="position:absolute;top: 109px;left: 714px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">冠军</div>');
                $('#div').append('<img style="position:absolute;top: 130px;left: 774px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="冠军.png" />');
            }
            // 亚军
            $('#div').append('<div style="position:absolute;top: 209px;left: 795px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">亚军</div>');
            $('#div').append('<img style="position:absolute;top: 230px;left: 853px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="亚军.png" />');
            // 季军
            $('#div').append('<div style="position:absolute;top: 331px;left: 633px;width:100px;height:30px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;">季军</div>');
            $('#div').append('<img style="position:absolute;top: 352px;left: 692px;width:50px;height:50px;line-height:40px;text-align:right;font-size:15px;font-weight:bold;transform: rotateZ(30deg);" src="季军.png" />');
        }
    });

</script>