前端在四个图片中随机显示一个

最新推荐文章于 2025-06-30 11:47:43 发布

原创最新推荐文章于 2025-06-30 11:47:43 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#随机

技术资料专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种前端实现随机图片显示的方法，通过定义一个包含多种主题的图片库，利用JavaScript生成随机索引，从而在页面上展示不同主题的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img :src="suprizeImg" class="bgImg"/>
js:
//前端随机四个图片之一显示在分享有惊喜那里
    randomPic() {
      this.tagHash = {
        //金钱
        "1": {
          //随机生成的图片
          suprizeUrl: "./js/assets/tag/jinqianShare.png",
          href: "",
          tag: "金钱"
        },
        //旅行
        "2": {
          suprizeUrl: "./js/assets/tag/lvxingShare.png",
          href: "",
          tag: "旅行"
        },
        //人生
        "3": {
          suprizeUrl: "./js/assets/tag/renshengShare.png",
          href: "",
          tag: "人生"
        },
        //一生
        "4": {
          suprizeUrl: "./js/assets/tag/renshengShare.png",
          href: "",
          tag: "一生"
        }
      };
      let randomKeys = ["1", "2", "3", "4"];
      let index = Math.floor(Math.random() * 4);
      this.suprizeImg = this.tagHash[randomKeys[index]].suprizeUrl;
      
    },