將顏色作爲輸入並重復更改背景和前景色直到用戶單擊取消按鈕

我手邊有這個問題：提示用戶輸入他最喜歡的背景和前景色。接收值並將其應用於頁面的背景和前景。繼續向用戶提示這些詳細信息，直到用戶說不（請按取消按鈕）。將顏色作爲輸入並重復更改背景和前景色直到用戶單擊取消按鈕

這是我做過什麼，到目前爲止：

<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

謝謝你的回答:) –

將顏色作爲輸入並重復更改背景和前景色直到用戶單擊取消按鈕

回答

相關問題