在Javascript中显示来自数据库的图像链接的Javascript数组中的3个随机图像_Javascript_Arrays_Image_Random

在Javascript中显示来自数据库的图像链接的Javascript数组中的3个随机图像

javascript arrays image random

在Javascript中显示来自数据库的图像链接的Javascript数组中的3个随机图像,javascript,arrays,image,random,Javascript,Arrays,Image,Random,我正在努力从我的Javascript数组中随机抽取3张图像（无重复），并在屏幕上以单独的div打印它们我的Javascript数组由一个数据库填充，该数据库包含服务器上图像的链接/位置当前我的页面如下所示： <html> <head> </head> <body> <div></div> <script> var items = [ {name:'Coc

我正在努力从我的Javascript数组中随机抽取3张图像（无重复），并在屏幕上以单独的div打印它们

我的Javascript数组由一个数据库填充，该数据库包含服务器上图像的链接/位置

当前我的页面如下所示：

<html>
   <head>
  </head>
   <body>
    <div></div>
    <script>
      var items = [
      {name:'Coch',image:'upload/coch.png'},{name:'Glas',image:'upload/glas.png'},     {name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},    {name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},{name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},{name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},{name:'Piws',image:'upload/piws.png'}      ];
      for (var i = 0; i < items.length; i += 1) {
        document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " +       items[i].image + "<br />\n";
      } 
    </script>
  </body>
</html>


可变项目=[
{name:'Coch'，image:'upload/Coch.png'}，{name:'Glas'，image:'upload/Glas.png'}，{name:'Melyn'，image:'upload/Melyn.png'}，{name:'Ci'，image:'upload/dog.jpg'}，{name:'upload/Cath.jpg'}，{name:'Gwyrdd image:'upload/Gwyrdd image:'upload/Gwyrdd.png'}，{name:'Un'，image:'upload/Un.jpg'}，{name:'Dau，{upload/daud jpg''jpg'}，{，{name:'Bochdew'，image:'upload/Bochdew.jpg'}，{name:'Piws'，image:'upload/Piws.png'}]；
对于（变量i=0；i\n”；
}

这段代码只是从数据库中获取图像链接，并将它们插入javascipt数组中（并在屏幕上打印链接）

有谁能帮我把这件事做好吗？从该阵列中获取3个随机图像链接（无重复），并在屏幕上以3个不同的分区显示3个图像

我对javascipt一点也不擅长，任何代码示例都会很棒

提前感谢您的回复。

洗牌您的阵列，然后接受前三项。在这里，您可以找到一个很好的函数来洗牌数组：

洗牌你的阵型，然后拿走前三项。在这里，您可以找到一个很好的函数来洗牌数组：

假设指向图像源的链接相对于图像将显示的页面是正确的，这应该可以做到：

var list = document.getElementsByTagName('div')[0];
for(i = 0; i < 3; i++) {
  // Choose a random item and remove it from the array
  var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

  // Create the image element and set its src attribute
  var image = document.createElement('img');
  image.src = item.image;

  // Add it to your container element
  list.appendChild(image);
}

var list=document.getElementsByTagName（'div'）[0]；
对于（i=0；i<3；i++）{
//选择一个随机项并将其从数组中删除
var item=items.splice（Math.floor（Math.random（）*items.length），1）[0]；
//创建image元素并设置其src属性
var image=document.createElement（'img'）；
image.src=item.image；
//将其添加到容器元素中
list.appendChild（图像）；
}

请注意，这将修改“items”数组，因此如果以后需要它，则需要先复制数组或调整逻辑

jsiddle:

假设指向图像源的链接相对于图像将出现的页面是正确的，这应该可以做到：

var list = document.getElementsByTagName('div')[0];
for(i = 0; i < 3; i++) {
  // Choose a random item and remove it from the array
  var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

  // Create the image element and set its src attribute
  var image = document.createElement('img');
  image.src = item.image;

  // Add it to your container element
  list.appendChild(image);
}

var list=document.getElementsByTagName（'div'）[0]；
对于（i=0；i<3；i++）{
//选择一个随机项并将其从数组中删除
var item=items.splice（Math.floor（Math.random（）*items.length），1）[0]；
//创建image元素并设置其src属性
var image=document.createElement（'img'）；
image.src=item.image；
//将其添加到容器元素中
list.appendChild（图像）；
}

请注意，这将修改“items”数组，因此如果以后需要它，则需要先复制数组或调整逻辑

JSFIDLE:

工作得很好！非常感谢。有什么方法可以让每个图像都变成一个单独的文件吗？再次感谢！是的，您只需要做一个

document.createElement（'div'））

在循环中，将图像附加到

div

而不是

列表

。然后，您可以将

div

附加到

列表

，或者如果您不需要

div

周围的容器，您可以将每个

div

附加到

主体

标记。再次感谢您的回复。我会给您一个很抱歉，我运气不好，我对这类事情不太在行。你能给我一些示例代码吗？提前谢谢你。效果很好！非常感谢。有什么方法可以让每个图像都独立起来吗？再次感谢！是的，你只需要做一个

document.createElement（'div'））

在循环中，将图像附加到

div

而不是

列表

。然后，您可以将

div

附加到

列表

，或者如果您不需要

div

周围的容器，您可以将每个

div

附加到

主体

标记。再次感谢您的回复。我会给您一个很抱歉我运气不好，我对这类事情不太在行。你能给我一些示例代码吗？提前谢谢。