时间戳

首页 > 解决方案 > 在延迟显示的 JavaScript 循环中更改背景颜色

javascript - 在延迟显示的 JavaScript 循环中更改背景颜色

问题描述

我想探索CSS hsl颜色。属性色调hsl可以在 0 到 360 之间，所以我循环了从 0 到 360 的数字并像这样设置背景颜色hsl(i, 50%, 50%)。为了看到颜色，我尝试实现代码的延迟执行，否则我认为代码执行速度会如此之快，以至于我看不到它。出于某种原因，它似乎不起作用。我的期望是看到颜色每 1 秒变化一次，但它只变为红色一次，然后什么也没有发生。此外，代码一次运行，没有延迟。这是我的代码：

function myLoop() {
  for (let i = 0; i < 361; i++) {
    console.log(i);
    setTimeout(changeColor(i), 1000);
  }
}

function changeColor(hueIndex) {
  let elem = document.getElementById('bodyId');
  elem.style.backgroundColor = `hsl(${hueIndex}, 50%, 50%)`;
}
<body id='bodyId'>
  <button onclick="myLoop();">Click me!</button>
</body>

标签： javascriptcss

解决方案

 function myLoop() {
        for (var i = 1; i <= 360; i++) {
            (function (i) {
                setTimeout(function () {
                    document.querySelector("#bodyId").style.backgroundColor = `hsl(${i}, 50%, 50%)`;
                },100);
            })(i)
        }
    }

带有 setTiomeOut 的函数

推荐阅读