Question

我正在创建一个简单的引导页面，当你第一次打开页面时，页面询问你是否喜欢黑暗主题或浅色主题（主题根据你的答案而改变。）另外我想把它放在哪里如果用户键入除DARK或LIGHT以外的任何内容，提示只会一直询问，直到您选择a或b。不幸的是，发生的事情是提示询问用户并输入其他内容并再次询问您，然后如果您输入除了两个答案之外的其他任何内容，它会放弃并转到默认背景。有办法防止这种情况吗？这是我的代码......

var background_image = prompt("Do you prefer a LIGHT background or a DARK background?")


if (background_image == 'LIGHT') {
  $('body').css('background-image', 'url("assets/background.jpg")')
} else if (background_image == 'DARK'){
  $('body').css('background-image', 'url("assets/dark.jpg")')
} else {
  var background_image = prompt("Do you prefer a LIGHT background or a      
  DARK background?")
} 




body{
 background-image: url("../assets/grey.jpg");
}

另外，如果您第一次输入除a或b之外的任何内容，请尝试通过在第二次输入光线或黑暗来自我修正，尝试自动恢复为默认主题

谢谢

Answer 1

好吧，你的代码在第二次提示后结束，你为什么期望再运行一次。

你需要这样做 - 尝试使它成为一个函数，然后重新运行函数而不是第二个提示。了解递归。

见：

＆＃13;

function ask() {
  var background_image = prompt("Do you prefer a LIGHT background or a DARK background?");

  if (background_image == 'LIGHT') {
    $('body').css('background-image', 'url("assets/background.jpg")')
  } else if (background_image == 'DARK') {
    $('body').css('background-image', 'url("assets/dark.jpg")')
  } else {
    ask();
  }
}

ask();

＆＃13;

另外，如果您第一次输入除a或b之外的任何内容，请尝试通过在第二次输入光线或黑暗来自我修正，尝试自动恢复为默认主题

同样，代码中的第二次尝试无关紧要，因为之后没有任何反应。

Answer 2

你可以尝试循环：

 var quit;
 var user; // for user input
 do {
   quit = true;
   user = prompt('Do you prefer a LIGHT background or a DARK background?', 'LIGHT').toLowerCase();
   if (user === 'light') {
     $('body').css('background-image', 'url("assets/background.jpg")');
   } else if (user == 'dark') {
     $('body').css('background-image', 'url("assets/dark.jpg")');
   } else {
     quit = false;
   }
 } while (!quit);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

^{免责声明：与SO上已有一堆答案的问题不完全相关。}

但与我在你的问题中的评论有关，我根本不使用警报，确认，提示等：

只需

＆＃13;

var themes = {
  default : "http://placehold.it/800x600/ccc/457?text=MS+THEMES",
  dark    : "http://placehold.it/800x600/125/adc?text=DARK",
  light   : "http://placehold.it/800x600/adc/125?text=LIGHT",
};

$("#dark, #light, #default").click(function(){
    $("body").css({ backgroundImage : "url("+ themes[this.id] +")" });
    $("#popup, #default").fadeToggle();
});

＆＃13;

html, body{
  margin:0; 
  height:100%;
}
body{
  font:100%/1.2 sans-serif;
  background: url(http://placehold.it/800x600/ccc/457?text=MS+THEMES) 50% / cover;
}
#popup{
  position: fixed;
  left: 50%; top:  50%;
  transform:  translate(-50%, -50%);
  text-align: center;
  padding:    20px 30px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 5px 30px rgba(0,0,0,0.5);
}
#popup h2{
  font-weight: normal;
}
#default{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="default">CHANGE THEME</button>

<div id="popup">
  <p>
    Select your theme:<br><br>
    <button id="dark">DARK</button>
    <button id="light">LIGHT</button>
  </p>
</div>

＆＃13;

一次尝试后javascript提示失败

3 个答案: