Question

我目前正在尝试编写一个按钮，将我的网页背景更改为随机图像。我的代码似乎正在工作，但它只会使用我的if / else语句行中的最后一个图像（我可能需要使用案例）。我试图让它选择Math.floor(Math.random()*3)的随机图像。它的作用是使用if语句：

var randomImg = (Math.floor(Math.random()*3))
   if (randomImg = 1) {
       $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
   }
   if (randomImg = 3) {
       $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
   }
   if (randomImg = 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

我应该使用switch语句吗？我应该使用for循环吗？

感谢您的时间和合作。

Answer 1

或者，你可以避免if / else：

var randomImg = (Math.floor(Math.random()*3));

images=new Array('http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993','http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg','http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg');

 $('html').css("background-image","url("+images[randomImg] +")");

http://jsfiddle.net/7ExyY/ 简单，将bgr图像存储到数组中，然后选择一个元素......

编辑：使事情变得更有活力使用这样的东西：

var randomImg = (Math.floor(Math.random()*images.length));
console.log(randomImg);
$('html').css("background-image","url("+images[randomImg] +")");

<强> http://jsfiddle.net/7ExyY/2/

所以，你不仅限于3张图片，数组长度是限制的......

Answer 2

所有if语句都应该==而不是=

randomImg = 1

应该是

randomImg == 1

Answer 3

=1确实没有返回true或false（它没有条件检查），所以我认为你正在寻找===1。三个等号，因为类型没有被转换为相互检查。但是，在这种情况下，switch语句会更有效：

var randomImg = (Math.floor(Math.random()*3))
switch(randomImage)
{
    case 0:
    $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
    break;

    case 1:
    $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
    break;

    case 2:
    $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
    break;
}

我将1-3更改为0-2，因为这是randomImg范围内的内容。

这个，或做nevermind建议并创建数组。

Answer 4

=正在分配运营商。使用==作为比较运算符

var randomImg = (Math.floor(Math.random()*3))
   if (randomImg == 1) {
       $('html').css("background-image","url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
   }
   else if (randomImg == 3) {
       $('html').css("background","url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
   }
   else if (randomImg == 2) {
       $('html').css("background","url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
   }

Answer 5

您正在分配而不是检查。

要为变量赋值，请使用“=”|检查另一个用户的值“==”

var randomImg = (Math.floor(Math.random() * 3))
if (randomImg == 1) {
    $('html').css("background-image", "url(http://i1-news.softpedia-static.com/images/news-700/Bomb-Threat-Prompts-Evacuation-of-Microsoft-s-Greek-Headquarters.png?1363255993)")
}
if (randomImg == 3) {
    $('html').css("background", "url(http://www.zdeai.com/news/wp-content/uploads/sites/5/2013/10/d6802__tour-googles-luxurious-googleplex-campus-in-california.jpg)")
}
if (randomImg == 2) {
  $('html').css("background", "url(http://upload.wikimedia.org/wikipedia/commons/8/84/Apple_Campus_One_Infinite_Loop_Sign.jpg)")
}

Answer 6

您不需要编写那么大的代码。只需使用此 -

$("button").click(function(){

    var img = (Math.floor(Math.random()*3));

    allImg = new Array('link/to/img1.jpg','link/to/img2.jpg','link/to/img3.jpg');

    $('html').css("background-image","url("+allImg[img] +")");
})

点击按钮即可显示随机图像？

6 个答案: