gpt4 book ai didi

javascript - 旋转期间 HTML 元素呈现不佳

转载 作者:行者123 更新时间:2023-11-30 17:28:46 26 4
gpt4 key购买 nike

我有一个用 html 编写的简单的 Sudoko 游戏。我有一个 9 行 9 列的表格,上面有不同的数字,玩家可以切换他们的位置。完成后,他单击一个按钮,确认表格单元格是合法的数独板。如果表格是已解决的数独,则所有单元格都应使用 SetInterval 函数向右旋转。

但是,某些单元格的渲染速度不如其他单元格。下排的单元格有时会停止旋转。我该如何解决这个问题?

这是我的代码:

<body>

<table id="SudukoTable">
<tr>
<td class="One" id="C1" onclick="SwitchWith(this)">1</td>
<td class="One" id="C2" onclick="SwitchWith(this)">1</td>
<td class="One" id="C3" onclick="SwitchWith(this)">1</td>
<td class="One" id="C4" onclick="SwitchWith(this)">1</td>
<td class="One" id="C5" onclick="SwitchWith(this)">1</td>
<td class="One" id="C6" onclick="SwitchWith(this)">1</td>
<td class="One" id="C7" onclick="SwitchWith(this)">1</td>
<td class="One" id="C8" onclick="SwitchWith(this)">1</td>
<td class="One" id="C9" onclick="SwitchWith(this)">1</td>
</tr>
<tr>
<td class="Two" id="C10" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C11" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C12" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C13" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C14" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C15" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C16" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C17" onclick="SwitchWith(this)">2</td>
<td class="Two" id="C18" onclick="SwitchWith(this)">2</td>
</tr>
<tr>
<td class="Three" id="C19" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C20" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C21" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C22" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C23" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C24" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C25" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C26" onclick="SwitchWith(this)">3</td>
<td class="Three" id="C27" onclick="SwitchWith(this)">3</td>
</tr>
<tr>
<td class="Four" id="C28" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C29" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C30" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C31" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C32" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C33" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C34" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C35" onclick="SwitchWith(this)">4</td>
<td class="Four" id="C36" onclick="SwitchWith(this)">4</td>
</tr>
<tr>
<td class="Five" id="C37" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C38" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C39" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C40" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C41" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C42" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C43" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C44" onclick="SwitchWith(this)">5</td>
<td class="Five" id="C45" onclick="SwitchWith(this)">5</td>
</tr>
<tr>
<td class="Six" id="C46" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C47" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C48" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C49" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C50" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C51" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C52" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C53" onclick="SwitchWith(this)">6</td>
<td class="Six" id="C54" onclick="SwitchWith(this)">6</td>
</tr>
<tr>
<td class="Seven" id="C55" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C56" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C57" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C58" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C59" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C60" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C61" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C62" onclick="SwitchWith(this)">7</td>
<td class="Seven" id="C63" onclick="SwitchWith(this)">7</td>
</tr>
<tr>
<td class="Eight" id="C64" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C65" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C66" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C67" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C68" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C69" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C70" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C71" onclick="SwitchWith(this)">8</td>
<td class="Eight" id="C72" onclick="SwitchWith(this)">8</td>
</tr>
<tr>
<td class="Nine" id="C73" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C74" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C75" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C76" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C77" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C78" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C79" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C80" onclick="SwitchWith(this)">9</td>
<td class="Nine" id="C81" onclick="SwitchWith(this)">9</td>
</tr>

</table>
<button id="CheckBtn" onclick="RoateAll()">Finished</button>

这是我的 javascript 文件:

function RotateAll() {

setInterval(function () {
angle++;

for (var i = 1; i < 82; i++) {

var a = document.getElementById("C" + i);
a.style.webkitTransform = "rotate("+angle+"deg)"

}
}, 60);

这是我的表格在其单元格旋转多次后的样子:

enter image description here

最佳答案

您应该使用 3d 变换来启动硬件加速!

#SudukoTable td {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}

查看演示 - http://jsfiddle.net/iancwoodward/sT7UJ/4/

3D 变换专用于 3D(显然),但是当您通过激活第 3 轴(即 Z 轴或 translateZ)来启动它们时,它会产生同时启动 OpenGl 驱动程序的副作用,从而使您可以访问硬件加速。换句话说,您正在使用 3D 处理器在您的计算机中渲染动画而不是正常的软件渲染。其他 2 个属性用于修复某些浏览器中的抖动动画,因为它们有时会尝试呈现对象的两面,即使您只打算显示一侧。

关于javascript - 旋转期间 HTML 元素呈现不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23646753/

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