gpt4 book ai didi

javascript - 样式更改后在Chrome中强制重新绘制/重新渲染

转载 作者:太空宇宙 更新时间:2023-11-04 15:43:03 25 4
gpt4 key购买 nike

我正在尝试转换网页上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');
}


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

我的目标是一次更改一个单元格,以便您可以观察它们从左上角到右下角的变化

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

我还尝试添加一个等待时间以减慢内部循环,以确保发生的速度足以让我看到,但是如上所述,更改发生在警报之后,而不是在运行时设置类时发生。

最佳答案

使用一些代码,我将这个简化的表格(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>


当metsCriteria()函数发现i + j值为3时,绿色单元格将从绿色变为红色。第一个1/2秒,第二个1秒,第三个1.5秒,依此类推。

只需将500的值调整为您所需的需求即可。

关于javascript - 样式更改后在Chrome中强制重新绘制/重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43728379/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com