时间戳

首页 > 解决方案 > 如何使用 querySelector 创建循环

javascript - 如何使用 querySelector 创建循环

问题描述

嗯，我有一个想法，启动一个值为 1 的 html 标签。然后使用浏览器控制台，为标签分配一个 id，并使用 querySelector 方法更改标签的值，它完美地工作。

但是，我想在控制台上创建一个循环，使这个值 1 上升到 100，可以这样做吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Loop's</title>
</head>
<body>
    <p>1</p>
</body>
</html>

如何在控制台上启动一个循环，并让这个p标签开始计数并停止在 100？

编辑

我说了works perfectly，因为我改变了标签值，用querySelector，我使用的代码是这样的

document.querySelector("p").innerHTML = "Changed"

我分配了值Changed，但我想知道是否可以开始重复循环并开始从 1 到 100 的计数

标签： javascripthtml

解决方案

increment()在这种情况下，您可以通过进入控制台来触发循环。

var incrementer = document.querySelector("#incrementer");
function increment(){
  var current = incrementer.textContent;
  if(current!=100){
    incrementer.textContent=parseInt(current)+1;
    setTimeout(increment, 10);
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Loop's</title>
</head>
<body>
    <p id="incrementer">1</p>
</body>
</html>

自动示例：

var incrementer = document.querySelector("#incrementer");
function increment(){
  var current = incrementer.textContent;
  if(current!=100){
    incrementer.textContent=parseInt(current)+1;
    setTimeout(increment, 10);
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Loop's</title>
</head>
<body>
    <p id="incrementer">1</p>
    <button onclick="increment();">Increment</button>
</body>
</html>

推荐阅读