如何将此“JavaScript”转换为“Jquery”

Question

我有一个在 chrome kiosk 模式下使用的 HTML 页面（用于永久显示，而不是常规网站使用）

此页面显示信息并有一个 jquery 幻灯片，在该幻灯片之上是一个通过 javascript 实现的动画。

这是它的脚本：

function ovl00() {
    document.getElementById('OV00').style.opacity = '1';
    document.getElementById('OV01').style.opacity = '0';
    document.getElementById('OV02').style.opacity = '0';
    document.getElementById('OV03').style.opacity = '0';
    document.getElementById('OV04').style.opacity = '0';
    document.getElementById('OV05').style.opacity = '0';
    document.getElementById('OV06').style.opacity = '0';
    document.getElementById('OV07').style.opacity = '0';
    document.getElementById('OV08').style.opacity = '0';
    document.getElementById('OV09').style.opacity = '0';
    document.getElementById('OV10').style.opacity = '0';
    document.getElementById('OV11').style.opacity = '0';
    document.getElementById('OV12').style.opacity = '0';
    document.getElementById('OV13').style.opacity = '0';
    document.getElementById('OV14').style.opacity = '0';
    document.getElementById('OV15').style.opacity = '0';
    document.getElementById('OV16').style.opacity = '0';
    document.getElementById('OV17').style.opacity = '0';
    document.getElementById('OV18').style.opacity = '0';
    document.getElementById('OV19').style.opacity = '0';
    document.getElementById('OV20').style.opacity = '0';
    document.getElementById('OV21').style.opacity = '0';
    document.getElementById('OV22').style.opacity = '0';
    document.getElementById('OV23').style.opacity = '0';
    document.getElementById('OV24').style.opacity = '0';
    document.getElementById('OV25').style.opacity = '0';
    document.getElementById('OV26').style.opacity = '0';
    setTimeout(ovl01, 10702);
}
function ovl01() {
    document.getElementById('OV01').style.opacity = '1';
    setTimeout(ovl02, 10702);
}
function ovl02() {
    document.getElementById('OV02').style.opacity = '1';
    document.getElementById('OV00').style.opacity = '0';
    setTimeout(ovl03, 10702);
}
function ovl03() {
    document.getElementById('OV03').style.opacity = '1';
    setTimeout(ovl04, 10702);
}
function ovl04() {
    document.getElementById('OV04').style.opacity = '1';
    setTimeout(ovl05, 10702);
}
function ovl05() {
    document.getElementById('OV05').style.opacity = '1';
    setTimeout(ovl06, 10702);
}
function ovl06() {
    document.getElementById('OV06').style.opacity = '1';
    setTimeout(ovl07, 10702);
}
function ovl07() {
    document.getElementById('OV07').style.opacity = '1';
    setTimeout(ovl08, 10702);
}
function ovl08() {
    document.getElementById('OV08').style.opacity = '1';
    setTimeout(ovl09, 10702);
}
function ovl09() {
    document.getElementById('OV09').style.opacity = '1';
    setTimeout(ovl10, 10702);
}
function ovl10() {
    document.getElementById('OV10').style.opacity = '1';
    setTimeout(ovl11, 10702);
}
function ovl11() {
    document.getElementById('OV11').style.opacity = '1';
    setTimeout(ovl12, 10702);
}
function ovl12() {
    document.getElementById('OV12').style.opacity = '1';
    setTimeout(ovl13, 10702);
}
function ovl13() {
    document.getElementById('OV13').style.opacity = '1';
    setTimeout(ovl14, 10702);
}
function ovl14() {
    document.getElementById('OV14').style.opacity = '1';
    setTimeout(ovl15, 10702);
}
function ovl15() {
    document.getElementById('OV15').style.opacity = '1';
    setTimeout(ovl16, 10702);
}
function ovl16() {
    document.getElementById('OV16').style.opacity = '1';
    setTimeout(ovl17, 10702);
}
function ovl17() {
    document.getElementById('OV17').style.opacity = '1';
    setTimeout(ovl18, 10702);
}
function ovl18() {
    document.getElementById('OV18').style.opacity = '1';
    setTimeout(ovl19, 10702);
}
function ovl19() {
    document.getElementById('OV19').style.opacity = '1';
    setTimeout(ovl20, 10702);
}
function ovl20() {
    document.getElementById('OV20').style.opacity = '1';
    setTimeout(ovl21, 10702);
}
function ovl21() {
    document.getElementById('OV21').style.opacity = '1';
    setTimeout(ovl22, 10702);
}
function ovl22() {
    document.getElementById('OV22').style.opacity = '1';
    setTimeout(ovl23, 10702);
}
function ovl23() {
    document.getElementById('OV23').style.opacity = '1';
    setTimeout(ovl24, 10702);
}
function ovl24() {
    document.getElementById('OV24').style.opacity = '1';
    setTimeout(ovl25, 10702);
}
function ovl25() {
    document.getElementById('OV25').style.opacity = '1';
    setTimeout(ovl26, 10702);
}
function ovl26() {
    document.getElementById('OV26').style.opacity = '1';
    setTimeout(ovl00, 10702);
}

我想要转换的原因是（我猜）大多数简单：做一些研究我了解到Chrome实现了一些节能选项，当标签/窗口不是“活动”一个时，JavaScript触发器被慢下来一分钟一次。

这显然会使整个幻灯片+动画不同步并搞砸。 从我所见和了解到的情况来看，jquery 不受此影响。

所以我想让 HTML 页面失败/面向未来，以避免计时器节流。

在当前设置下，以 Kiosk 模式显示 HTML 的 PC 处于双显示模式：这意味着 chrome 通过 HDMI 2 处于全屏模式，并且通过 HDMI 1 在主显示器上完成工作。

所以这使得 chrome（从 windows 的角度来看）通常只是一个后台应用程序。

我担心的是，这个 chrome 实现迟早会弄乱当前的幻灯片...

我还应该指出，我对编码几乎一无所知，并且通过谷歌搜索和复制+粘贴完成了整个 HTML 和脚本，所以我希望我对此的解释足以让真正的编码人员理解并且这里的人可以将我引导到转换器应用程序（如 wav 到 mp3，但用于脚本）或类似的。

任何帮助表示赞赏！

-萨布丽娜

Answer 1

您使用的仅有 2 种 javascript 查询是

document.getElementById('OV00').style.opacity = '1';
setTimeout(ovl02, 10702);

和第一个等效的jQuery是

$("#OV00").css({ opacity: "1" });

我认为 jQuery 中的 setTimeout 没有不同的功能，同样可以。因此，您只需将包含 document.getElement... 的每一行更改为我提到的具有适当 ID 和不透明度值的行。

所以最后这就是你所要求的。但我认为这实际上并不能解决您的 chrome 限制动画的问题。 jQuery 与 JavaScript 没有什么不同，它们都由浏览器中的同一个 javascript 引擎执行。 jQuery 只是一个库，它为开发人员编写复杂的 javascript 提供了一种更简单的语法，并且在各种前端 javascript 框架到来之后几乎已经过时了。