当前位置:主页 > js > 随机读取数组中n个元素

随机读取数组中n个元素

xi4年前 (2020-06-10)js2200

需求

随机不重复的显示一系列图片

分析

可使用Math.random(),其作用是返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。先获取到图片路径,将图片路径放入数组中,再随机从数组中读取n个元素放入新数组,页面只需遍历新数组生成img即可。

实现

<template>
  <div class="container">
    <div class="container-div">
      <img v-for="item in randomList" :key="item" :src="item" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      imgList: [], //所有图片路径列表
      randomList: [], //随机图片路径列表
    };
  },
  mounted() {
    this.getImgList();
  },
  methods: {
    //获取所有图片列表
    getImgList() {
      let path = "";
      for (let i = 1; i < 16; i++) {
        path = "./img/randomList/" + i.toString() + ".jpg";
        this.imgList.push(path);
        path = "";
      }
      this.getRandomList(this.imgList, 5);
    },

    //从数组中随机获取一个元素
    // var ele = arr[Math.floor(Math.random()*arr.length)];

    //获取随机图片列表
    getRandomList(arr, count) {
      var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp,
        index;
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
      }
      this.randomList = shuffled.slice(min);
    },
  },
};
</script>
<style scoped>
.container-div {
  text-align: center;
  margin: 30px 0px;
}
.container-div img {
  width: 350px;
  height: 200px;
}
</style>

值得注意的是代码中的路径是相对与public下index.html的路径,图片放在src中则访问不到。

页面:

刷新页面后再次随机获取:

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=10

返回列表

没有更早的文章了...

下一篇:jsonp跨域

“随机读取数组中n个元素” 的相关文章

express项目的创建

express项目的创建

前言前端开发者若要进行后端开发,大多都会选择node.js,在node生态下是有大量框架的,其中最受新手喜爱的便是老牌的express.js,接下来我们就从零创建一个express项目。 安装nod...

js玩儿爬虫

js玩儿爬虫

前言提到爬虫可能大多都会想到python,其实爬虫的实现并不限制任何语言。下面我们就使用js来实现,后端为express,前端为vue3。 实现功能话不多说,先看结果:这是项目链接:https://...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。