Question

在页面加载时，我希望两个随机图像出现在单独的div中，这些div总是作为一对加载，即两只狗，两只猫或两匹马;但从来没有猫，狗，马和猫等。

这是我到目前为止所得到的......

＆＃13;

var dog1 = "https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg";
var dog2 = "http://weknowyourdreams.com/images/dog/dog-06.jpg";
var dogpics=[dog1,dog2];

function imgs_rand(){
  switch(Math.random()*3|0){
      case 0:
          return dogpics;
          break;
      case 1:
          return console.log("case 1");
          break;
      case 2:
          return console.log("case 2");
          break;
  }
}
console.log(imgs_rand()[0,1]);
document.getElementById('img1').src=imgs_rand()[0];
document.getElementById('img2').src=imgs_rand()[1];

＆＃13;

由于显而易见的原因，它无法正常工作。请帮我理解为什么这些原因是显而易见的。

Answer 1

为什么不生成多维数组。然后让随机只返回一个随机数，其中最大数字是数组长度。所以你可以改变你的数组并总是得到一对（两个图像）来自那个数组...

var dog1 = "https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg";
var dog2 = "http://weknowyourdreams.com/images/dog/dog-06.jpg";
var dogpics=[dog1,dog2];

var yourPics = [
  dogpics,
  [  // sports
    'http://lorempixel.com/400/200/sports/1/',
    'http://lorempixel.com/400/200/sports/2/'
  ],
  [  // nature
    'http://lorempixel.com/400/200/nature/1/',
    'http://lorempixel.com/400/200/nature/2/'
  
  ]
];

function get_random_number(array){
    return Math.floor(Math.random() * array.length);
}
var rand_number = get_random_number(yourPics);
console.log(rand_number);
document.getElementById('img1').src = yourPics[rand_number][0];
document.getElementById('img2').src = yourPics[rand_number][1];

img {
    max-width: 200px;
}

<img id="img1" >
<img id="img2" >

Answer 2

你遇到了一些问题：

console.log()会返回undefined，因此return console.log()也会返回undefined。
你为每个图片单独调用imgs_rand()，因此它们可能有不同的对 - 你需要调用一次然后为数组索引引用它的返回值两次。

你的意思：

var dog1 = "https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg";
var dog2 = "http://weknowyourdreams.com/images/dog/dog-06.jpg";
var dogpics = [dog1, dog2];
var cat1 = "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg";
var cat2 = "http://www.petmd.com/sites/default/files/scared-kitten-shutterstock_191443322.jpg";
var catpics = [cat1, cat2];
var horse1 = "http://www.horsechannel.com/images/horse-news-article-images/chestnut-horse-autumn_1000.jpg";
var horse2 = "https://www.purinamills.com/2.purinamills.com/media/Images/MasterBrand/Lifestages/horse-special-needs.png?ext=.png";
var horsepics = [horse1, horse2];

function imgs_rand(){
  switch(Math.floor(Math.random()*10%3)){
      case 0:
          return dogpics;
          break;
      case 1:
          return catpics;
          break;
      case 2:
          return horsepics;
          break;
  }
}
var images = imgs_rand();
console.log(images);
document.getElementById('img1').src=(images[0]);
document.getElementById('img2').src=(images[1]);

img {
    width: 200px;
}

<img id="img1"/>
<img id="img2"/>

免责声明：图片版权归各自所有者所有。

Javascript随机加载一对图像

2 个答案: