Question

首先，是的，我知道有更简单的方法在jQuery中执行此操作，但我正在尝试学习如何在Javascript中手动执行此操作以更好地理解该语言。

我有一个div，我想慢慢淡出彩虹的许多颜色。这是我到目前为止所做的：

<script type="text/javascript">
    var bar = document.getElementById("workbar");
    var x = 0;

    bar.onclick = change;

    function change() {
        requestAnimationFrame(color);
    }

    function color() {
        window.alert("color!");
        bar.style.background = "hsl(" + x + ", 100%, 50%);";
        if (x < 358) {
            x++;
            requestAnimationFrame(color);
        }

        else {
            x = 0;
            requestAnimationFrame(color);
        }
    }
</script>

我正在迭代hsl颜色系统的第一个数字，它将为我提供数百种颜色变化但不是宇宙中每一个不必要的颜色阴影。

我点击它，没有任何反应。现在我知道它正在通过颜色功能，因为我把那个警报框放在那里然后它就消失了。我也知道它正在循环显示颜色功能，因为在你离开警报框x后会出现另一个颜色。所以它必须是分配颜色的部分的问题。有什么想法吗？

Answer 1

删除分号

"hsl(" + x + ", 100%, 50%);";
                          ^

＆＃13;

(function () {

    var bar = document.getElementById("workbar"),
        x = 0;

    function color() {
        bar.style.background = "hsl(" + x + ", 100%, 50%)";
        x++; 
        if (x >= 358) {
            x = 0;
        }
        requestAnimationFrame(color);
    }

    function change() {
        requestAnimationFrame(color);
    }

    bar.addEventListener("click", change, false);

}());

＆＃13;

<div id="workbar">Click Me</div>

＆＃13;

Javascript颜色迭代器不工作？

1 个答案: