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

我手边有这个问题：提示用户输入他最喜欢的背景和前景色。接收值并将其应用于页面的背景和前景。继续向用户提示这些详细信息，直到用户说不（请按取消按钮）。将颜色作为输入并重复更改背景和前景色直到用户单击取消按钮

这是我做过什么，到目前为止：

<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>

此代码只是继续要求输入并没有体现在色彩的任何变化。我希望每次输入后颜色都会改变，直到用户点击取消。任何建议都会有用。谢谢。

来源

2017-08-14 Raja Dorji

Y我们的代码工作正常 –

@HoussemBdr但没有反映每个循环后的变化 –

While循环块从反映您的更改浏览器，使用这个代码片段：

<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>

来源

2017-08-14 08:16:39 tibetty

谢谢，这很好用 –

请你让我知道为什么while循环阻止变化？ –

它依赖于浏览器的实现，但我发现当脚本仍在运行时，大多数浏览器不更新DOM。 – tibetty

可以使用

回调将帧之后被召回准备

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>

来源

2017-08-14 08:20:54

谢谢你的回答:) –

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

回答

相关问题