游戏三局两胜结果页面展示（提供双方每局的值）jQuery简单demo

例如：A和B双方PK三场

得到的结果：A的值：1-2-3

                      B的值：2-1-3

游戏规则：1>2>3>1
问题：根据双方的值，把结果以及对应的胜、负、平局三种情况展示在页面上，如下简图

 

解决：
①首先要根据双方的值，处理一下PK结果区分胜(1)负(-1)平局(0)

   //用一个对象存放可能出现的9种结果，也可用es6的map方法，再定义两个数组，存放我方战绩、对方战绩

var scoreMap = {'1_1':0,'1_2':1,'1_3':-1,'2_1':-1,'2_2':0,'2_3':1,'3_1':1,'3_2':-1,'3_3':0}; 

var myResult=[];              //我方战绩

var otherResult=[];          //对方战绩

    //定义一个方法，拿到每场的值  填充结果数组

function getResult(my,other){

    var myCrickets=my.split('_');

    var otherCrickets=other.split('_');

    for(var i=0;i< myCrickets.length; i++){

        myResult[i] = scoreMap[myCrickets[i]+"_"+otherCrickets[i]];

        otherResult[i] = scoreMap[otherCrickets[i]+"_"+myCrickets[i]];

    }

}

//接下来获取后台给的双方信息

arr = [
            {
                "name": "我是用户1",
                "ext": "1_1_1"
            },
            {
                "name": "我是用户2",
                "ext": "1_1_1"
            }
        ]

//页面结果展示

function funcGetPkResult(listData,div) {

       var listStr = "";

       listData = arr;

       var data1 = listData[0];

       var data2 = listData[1];

       getResult(data1.ext,data2.ext);

       var ext = (data1.ext).split("_");

       var ext2 = (data2.ext).split("_");

      for (var i = 0; i < 3; i++) {

                listStr += "<div>"

                listStr += "<div class=name_'"+ ext[i] +"'></div>"

                listStr += "<div class='ressult_" + myResult[i] + "'></div>"

                listStr += "</div>"

      }

      $("#" + div).html(listStr)

}

最后页面展示只是简单写一个demo，具体的样式就不贴了，仅供参考