javascript比较数组

时间:2009-08-18 20:10:12

标签: javascript arrays compare

有人为我制作了一个比较脚本,但它的工作方式应该如此,因为我有点不清楚,代码并没有完全按照我喜欢的方式进行。

请看一下这个网站,这将解释千言万语

本网站的功能是检查乐透/宾果号码,每个抽奖日(1和2)应与所有正在播放的人进行比较。有些数字是绿色的,但并非所有数字都是绿色,应该是绿色,因为它们与玩家列表中的某些数字相匹配。再次,这是我自己的错,因为我不够清楚。有人可以告诉我应该更换或编辑哪个部分来检查DRAW var中的所有数字,而不是只检查最新添加的var吗?

http://www.coldcharlie.nl/lotto/

这是功能部分。

function checkArray(guesses, draw) {
    var results = {}
    for (var i = 0; i< guesses.length; ++i) {
        if (draw.picks[guesses[i]]) {
            results[guesses[i]] = 'win';
        } else {
            results[guesses[i]] = 'loss';
        }
    }
    return results;
}

function appendTo(elt, parent) {
    if (parent) {
        document.getElementById(parent).appendChild(elt);
    } else {
        document.body.appendChild(elt);
    }
}

function printResults(name, winloss, parent) {
    var resultElt = document.createElement('div');
    resultElt.appendChild(document.createElement('span'));
    resultElt.firstChild.appendChild(document.createTextNode(name));
    resultElt.firstChild.className='name';
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in winloss) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
        picks.lastChild.className = winloss[p];
    }
    resultElt.appendChild(picks);
    appendTo(resultElt, parent);
}

function printResultsFor(name, draw, parent) {
    printResults(name, checkArray(players[name], draw), parent);
}

function printDraw(which, draw, parent) {
    var drawElt = document.createElement('div');
    drawElt.className='draw';
    drawElt.appendChild(document.createElement('h3'));
    drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
    drawElt.lastChild.className='drawNum';
    drawElt.appendChild(document.createElement('div'));
    drawElt.lastChild.className='date';
    drawElt.lastChild.appendChild(document.createTextNode(draw.when));
    var picks = document.createElement('ol');
    picks.className='picks';
    for (var p in draw.picks) {
        picks.appendChild(document.createElement('li'));
        picks.lastChild.appendChild(document.createTextNode(p));
    }
    drawElt.appendChild(picks);
    appendTo(drawElt, parent);
}

这是HTML部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: white;
        background-color: #333;
      }
      .name {
        color: white;
        font-weight: bold;
        margin-right: 0.5em;
      }
      .picks, .picks * {
        display: inline;
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .picks * {
        margin: auto 0.25em;
      }
      .win { color: lime; }
      .loss { color: red; }
      .drawNum, #Draws H3 {
          margin-bottom: 0;
      }
    </style>
    <script type="text/javascript" src="lotto.js"></script>
  </head>
  <body>
    <div id="Results"></div>
    <div id="Draws"></div>
    <script type="text/javascript">
    var players = {John: ["2","3","8","12","23", "37", "41", "45", "48"],
                   Michael: ["2","14","3","12","24", "37", "41", "46", "48"]};

    var draws = [ {when: 'Sat 08-08-2009',
                   picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
                  {when: 'Sat 15-08-2009',
                   picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];
    draws.last = draws[draws.length-1];

    for (name in players) {
      printResultsFor(name, draws.last, 'Results');
    }
    for (var i=0; i<draws.length; ++i) {
      printDraw(i+1, draws[i]);
    }
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:2)

我有一个不同的建议:

  1. 使用jquery
  2. 生成html,使得每个玩家编号将具有包含该编号的类的跨度。例如,37将被写为<span class='pick37'>37</span>
  3. 摆脱疯狂的数组逻辑,只需要一个循环就可以将所有类的颜色设置为与获胜数字一致的绿色。
  4. 编辑:我查看了您的问题。谁想出了这个实现,就不会让它变得更复杂。我想要解决你的问题,但是当重写更容易/更快时,没有充分的理由尝试使用该代码。

    是否有任何理由让代码成为现实?

    edit2:我的心情很好,所以我重写了它: 也可在此处获取:http://dogself.com/test.htm

    我希望你能从中学到一些东西。

    <html>
    <head>
    <title>Bingo stuff</title>
    <body>
    <style type="text/css">
          body {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: white;
            background-color: #333;
          }
          .name {
            color: white;
            font-weight: bold;
            margin-right: 0.5em;
          }
          .picks, .picks * {
            display: inline;
            margin: 0;
            padding: 0;
            list-style-type: none;
          }
          .picks * {
            margin: auto 0.25em;
          }
          .win { color: lime; }
          .loss { color: red; }
          .drawNum, #Draws H3 {
              margin-bottom: 0;
          }
        </style>
    <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>
    <div id="players"></div>
    <div id="draws"></div>
    
    <script type="text/javascript">
    var players = {
                    Joop   : ["6","8","16","18","26","28","32","36","38","41"],
                    Marijke: ["7","10","14","18","24","29","30","34","39","40"],
                    Michel : ["4","5","11","16","21","27","33","36","42","44"],
                    Mario  : ["6","9","18","25","32","35","39","40","43","45"],
                    Diana  : ["2","6","8","17","22","23","33","36","42","44"],
                    Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
                    Chris  : ["5","7","8","9","11","12","16","28","30","32"],
                    Jeannette: ["1","2","4","7","8","11","13","28","30","32"],
                    Wieger: ["1","2","3","7","10","13","14","22","23","27"],
                    Anita: ["6","13","15","17","21","26","32","33","43","45"],
                    Thea: ["1","3","5","7","10","17","19","20","22","38"],
                    Danny: ["3","7","11","15","22","28","32","37","40","43"],
                    Cindy: ["2","4","16","18","21","24","33","38","41","44"],
                    Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
                    Willem: ["3","9","17","21","27","33","35","39","41","42"]
    
                  };
    
    var draws = [ {
                   when: 'Sat 08-08-2009',
                   picks:[2, 5, 11, 16, 23, 45, 46]
                  },
                  {
                   when: 'Sat 15-08-2009',
                   picks:[1, 23, 11, 14, 23, 42, 46]
                  }
                ];
    
    var buildPlayers = function(){
        var cont = $("#players");
        for(player in players){
            var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"];
            for(var i = 0; i < players[player].length; i++){
                html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>");
            }
            html.push("</ol>","</div>");
            cont.append(html.join(""));
        }
    };
    
    var buildDraws = function(){
        var cont = $("#draws");
        for(var i = 0; i < draws.length; i++){
            var html = ["<div class='draw'>","<h3 class='drawNum'>Draw "+(i+1)+"</h3>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];
            for(var j = 0; j < draws[i].picks.length; j++){
                html.push("<li>"+draws[i].picks[j]+"</li>");
                showWin(draws[i].picks[j]);
            }
            html.push("</ol>","</div>");
            cont.append(html.join(""));
        }
    };
    
    var showWin = function(winNum){
        $(".pick_"+winNum).removeClass("loss").addClass("win");
    };
    
    $(function(){
        buildPlayers();
        buildDraws();
    });
    
    </script>
    </body>
    </html>