Question

我手头有这个问题：提示用户输入他最喜欢的背景和前景色。接收值并应用与页面背景和前景相同的值。继续提示用户提供这些详细信息，直到用户拒绝（按取消按钮）。

这是我到目前为止所做的：

<html>
  <head>
  <title>Color change</title>
  </head>

  <body>
  <p id="msg">Test sentence</p>
  <button onclick=myFunction()>Input</button>
  <script>
    function myFunction(){

      do{
        var a=prompt("Input backgroud color.","red");
        document.body.style.backgroundColor=a;
        var b=prompt("Input foreground color.","green");
        document.body.style.color=b;
      }while(a!="");
    }

  </script>
  </body>
</html>

此代码只是一直要求输入，并不反映颜色的任何变化。我想在每次输入后更改颜色，直到用户点击取消。任何建议都会有用。感谢。

Answer 1

虽然循环阻止浏览器反映您的更改，但请使用以下代码段：

<button onclick="changeColor()">Input</button>
<script type="text/javascript">
function changeColor() {
    let a = prompt("Input backgroud color.", "red");
    if (a !== '') {
        document.body.style.backgroundColor = a;
        let b = prompt("Input foreground color.", "green");
        document.body.style.color = b;
        window.setTimeout(changeColor, 0);
    }
}
</script>

Answer 2

您可以使用requestAnimationFrame

帧准备就绪后将调用

回调

function myFunction() {
    var colors = ['red', 'green'];
    var i = 0,
        input = 1;

    function callback() {
        input = prompt("Input backgroud color.", colors[i++ % colors.length]);
        if (input && ~colors.indexOf(input)) {
            document.body.style.color = input;
            window.requestAnimationFrame(callback);
        }
    }
    window.requestAnimationFrame(callback);
}

Test sentence
<button onclick=myFunction()>Input</button>

将颜色作为输入并反复更改背景和前景色，直到用户单击取消按钮

2 个答案: