JavaScript 随机选择

在实际业务或需求中，可能会出现让用户每次进入随机展示不同的渲染内容，那前端如何做呢?

我们以宣传图广告为例，简单封装一个随机选取图片函数

定义数组 tips

使用数组字面量定义数组 tips，包含四个图片的 HTML 标签。

const tips = [
     '<img src="img/0.jpg">',
     '<img src="img/1.jpg">',
     '<img src="img/2.jpg">',
     '<img src="img/3.jpg">'
   ];

生成随机索引并获取随机元素

const randomTip = tips[Math.floor(Math.random() * tips.length)];

• Math.random() 生成一个介于 0 和 1 之间的随机浮点数。
• Math.random() * tips.length 将这个随机数乘以数组的长度，得到一个介于 0 和数组长度之间的浮点数。
• Math.floor() 将这个浮点数向下取整，得到一个介于 0 和数组长度减 1 之间的整数，作为数组的索引。
• tips[Math.floor(Math.random() * tips.length)] 直接获取随机索引对应的数组元素。

插入随机选择的元素

document.body.insertAdjacentHTML('beforeend', randomTip);

• 使用 insertAdjacentHTML 方法将随机选择的图片标签插入到 body 的末尾。'beforeend' 参数表示将内容插入到指定元素的最后一个子节点之前。

完整代码

function displayRandomImg() {
  const tips = [
    '<img src="img/img0.jpg">',
    '<img src="img/img1.jpg">',
    '<img src="img/img2.jpg">',
    '<img src="img/img3.jpg">'
  ];

  const randomTip = tips[Math.floor(Math.random() * tips.length)];
  document.body.insertAdjacentHTML('beforeend', randomTip);
}