将颜色随机分配给表格单元格

时间:2015-12-17 11:58:10

标签: javascript

var colors = ['#129793', '#000000', '#FF6600', '#FFCC00', '#00FF00', '#663399', '#34DDDD', '#FF0080', '#028482', '#3399FF', 'magneta', 'crimson', 'fuschia', 'yellow orange', '#5F021F', '#333399', '#FF1A00', '#841F27', '#990000'];

function grid(rows, cols) {
    var size = rows;
    var opacity;

    if (size >= 10)
        opacity = 0.9;
    else
        opacity = size / 10;

    $('td').css("background", colors[Math.floor(Math.random() * colors.length)]);

    var table = "<table id = \"myTable\">";
    var size = (1 / rows * 525) + "px";

    for (i = 0; i < rows; i++) {
        table += "<tr>";

        for (j = 0; j < cols; j++) {
            //var ID = i+','+j;
            var ID = 'td_' + i + '_' + j;
            var ID2 = randomFunction(rows, cols);
            //table += "<td id = \"ID\" >"+"</td>";
            table += '<td id = "' + ID + '">&nbsp;</td>';
        }

        table += "</tr>";
    }

    table += "</table>";

    $("#container").empty().append(table);
    $('td').css("background", colors[Math.floor(Math.random() * colors.length)]);

    document.getElementById(ID2).style.opacity = opacity;
    document.getElementById(ID2).addEventListener("click", function () {
        grid(parseInt(rows) + 1, parseInt(cols) + 1);
    });
}

这是为kuku kube游戏随机生成的表格单元格分配颜色而编写的代码。它工作正常,但有时颜色没有分配给我不能进入下一级别的单元格。我需要刷新页面再次播放。我可以为此获得解决方案吗?

1 个答案:

答案 0 :(得分:0)

jQuery(function() {

var colors = ['#129793', '#000000', '#FF6600', '#FFCC00', '#00FF00', '#663399', '#34DDDD', '#FF0080', '#028482', '#3399FF', 'magneta', 'crimson', 'fuschia', 'yellow orange', '#5F021F', '#333399', '#FF1A00', '#841F27', '#990000'];

function grid(rows, cols) {
    var size = rows;
    var opacity;

    if (size >= 10)
        opacity = 0.9;
    else
        opacity = size / 10;

    var table = "<table id = \"myTable\" style='border:1px solid #ccc;'>";
    var size = (1 / rows * 525) + "px";

    for (i = 0; i < rows; i++) {
        table += "<tr>";

        for (j = 0; j < cols; j++) {
            //var ID = i+','+j;
            var ID = 'td_' + i + '_' + j;
            //var ID2 = randomFunction(rows, cols);
            //table += "<td id = \"ID\" >"+"</td>";
            table += '<td id = "' + ID + '">&nbsp;</td>';
        }

        table += "</tr>";
    }

    table += "</table>";

    jQuery("#container").empty().append(table);
    jQuery('td').each(function() {jQuery(this).css("background", colors[Math.floor(Math.random() * colors.length)]); });

    document.getElementById(ID).style.opacity = opacity;
    document.getElementById(ID).addEventListener("click", function () {
        grid(parseInt(rows) + 1, parseInt(cols) + 1);
    });
}

grid(14,4);
  
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

<div id="container"></div>