Question

我试图在网页上转换20x20表格中每个单元格的背景颜色。

（这是一个更复杂的简化版本）这是我到目前为止的尝试：

// Changes the color of each cell
function changeTableColor() {
    for(let i=0; i<20; i++){
        for(let j=0; j<20; j++){

            if( meetsCriteria(i, j) ){
                // Change the cell's class to set a new background color
                $('#cell'+i+'-'+j).removeClass('old');
                $('#cell'+i+'-'+j).addClass('new');
            }
        }
    }
    alert('Done changing colors');
}

这会成功更改单元格的所有背景颜色以匹配所需的结果，但它一次全部完成，并且只有在最后解除警报后才能看到更改。

我的目标是让细胞一次一个地变化，这样你就可以看到它们从左上角变为右下角

我发现了几个主题，讨论如何强制重新绘制/渲染窗口，例如触发窗口大小调整或修改父元素的可见性，但这些似乎都不起作用！

我还尝试添加一个等待来减慢内部循环，以确保它发生得足够缓慢让我看到，但如上所述，更改发生在警报之后，而不是在类设置为运行时。

Answer 1

使用你的一些代码，我将这个缩小的表（5x5而不是20x20）放在一起，如果我正确地理解了这个问题，这是你正在尝试实现的吗？在Chrome中运行它，看看你的想法：

<html>
<head>
<style>
td {
    width:100px;
    height:50px;
}

.old {
    background-color:green;
}

.new {
    background-color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function changeCell(i, j) {
    // Change the cell's class to set a new background color
    $('#cell'+i+'-'+j).removeClass('old');
    $('#cell'+i+'-'+j).addClass('new');
}

function meetsCriteria(i, j) {
    return (i+j) == 3;
}
// Changes the color of each cell
function changeTableColor() {
    var next = 1;

    for(let i=0; i<5; i++){
        for(let j=0; j<5; j++){

            if( meetsCriteria(i, j) ){
                setTimeout(function(){changeCell(i,j);}, 500 * next++);
            }
        }
    }
//    alert('Done changing colors');
}</script>
</head>
<body>
<table>
<tr><td class="old" id="cell0-0"></td><td class="old" id="cell0-1"></td><td class="old" id="cell0-2"></td><td class="old" id="cell0-3"></td><td class="old" id="cell0-4"></td></tr>
<tr><td class="old" id="cell1-0"></td><td class="old" id="cell1-1"></td><td class="old" id="cell1-2"></td><td class="old" id="cell1-3"></td><td class="old" id="cell1-4"></td></tr>
<tr><td class="old" id="cell2-0"></td><td class="old" id="cell2-1"></td><td class="old" id="cell2-2"></td><td class="old" id="cell2-3"></td><td class="old" id="cell2-4"></td></tr>
<tr><td class="old" id="cell3-0"></td><td class="old" id="cell3-1"></td><td class="old" id="cell3-2"></td><td class="old" id="cell3-3"></td><td class="old" id="cell3-4"></td></tr>
<tr><td class="old" id="cell4-0"></td><td class="old" id="cell4-1"></td><td class="old" id="cell4-2"></td><td class="old" id="cell4-3"></td><td class="old" id="cell4-4"></td></tr>
<script>
changeTableColor();
</script>
</body>
</html>

当meetCriteria（）函数发现i + j值为3时，绿色单元格将从绿色变为红色。第一个在1/2秒内，下一个在1秒内，第三个在1.5秒内等等。

只需根据您的需要调整500值即可。

样式更改后强制在Chrome中重新绘制/重新呈现

1 个答案: