Question

我正在尝试创建一个缓慢缠绕在屏幕周围的边框。作为此过程的一部分，我现在仅通过使用setInterval方法来增加边框的高度。但是，我无法使边框高度缓慢增加。下面是我在做什么：

var i = 1;
setBorder = setInterval(borderAnimation(), 200);
function borderAnimation() {
    var border = document.getElementById("border-animation");
    border.style.height = i + "vh";
    i = i + 1;
    document.write(i);
    if(i = 100){
        clearInterval(setBorder);
    }
}
document.write(2);

如果我将函数内的变量i更改为5，那么高度将变为该数字，因此我知道该函数至少被调用了一次。

类似地，document.write（i）仅打印一次。因此，如果我是1，那么在屏幕上我只会看到1；即使我有document.write（2），它也不会随时打印2。为什么会这样？

在此之后，我打算进行调整，以便调用另一个div，该div围绕顶部（左边），然后是另一个div，然后围绕底部，从而完成围绕屏幕的边框。如果有人有更好的主意或实现此目的的方法，请也告诉我。

Answer 1

有几个错误：

1：将函数引用（不要调用函数）传递给await page.evaluate(() => { window.anchors = [...document.querySelectorAll('a[href]')] return 'something else' }) await page.evaluate(() => { window.anchors[0].click() })
2：setInterval应该是if(i = 100)

if(i == 100)

var i = 1;
setBorder = setInterval(borderAnimation, 200);

function borderAnimation() {
    var border = document.getElementById("border-animation");
    border.style.height = i + "vh";
    i = i + 1;
    console.log(i);
    if(i == 20){
        clearInterval(setBorder);
    }
}

#border-animation{
  position: absolute;
  width: 200px;
  border: 1px solid #333;
}

使用setInterval不会增加高度（在屏幕周围创建边框）

1 个答案: