我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

🦖我是Sam9029，一个前端

Sam9029的掘金主页:Sam9029的掘金主页

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

随机抽取--新年招财兔子

新的一年,兔年的开始,这是我的本命年

去年发生了很多的事情,蹭着这次-兔了个兔-代码活动-的机会

实现一个web 端 随机图片 获取的 的小功能需求

效果--码上掘金

随机抽取--新年招财兔子 - 码上掘金 (juejin.cn)

技术栈:

Vue3 + JS

放假太很久了,随便温习以下Vue3的语法,活络一下-JS开发思维

需求:

• 利用 随机图片控制按钮 控制 页面上的图片展示框,展示随机图片
• 图片不会与上一次(当前图片)的重复

思路与实现:

页面实现

• 一个图片展示框

• 一个随机按钮

• 源码

<template>
  <div class="rab-one-box" >
    <div class="rab-card">

      <!-- <template v-for='item in imgData'> -->
        <img :src="currentImg.url" :alt="currentImg.alt">

      <!-- </template> -->

    </div>
    <button class="rab-card-button" @click='handleRandomImg()'>Random</button>
  </div>
</template>

JS 业务逻辑代码

• 使用 变量保存 当前展示的图片信息
• 模拟 图源库 (先写在本地)

// 本次图片
let currentImg = ref({})

// 图源库
let imgData = [
    {url:'https://wx2.sinaimg.cn/mw690/5c690f6ely1hamoiknjiaj20sg11xgrl.jpg',alt:'rabbit01'},
    {url:'https://wx3.sinaimg.cn/mw690/5c690f6ely1hamoikn7kkj20sg11x7aq.jpg',alt:'rabbit02'},
    {url:'https://wx4.sinaimg.cn/mw690/5c690f6ely1hamoikntz8j20sg11xgrr.jpg',alt:'rabbit03'},
    {url:'https://wx3.sinaimg.cn/mw690/5c690f6ely1hamoikorurj20sg11xahh.jpg',alt:'rabbit04'},
    {url:'https://wx1.sinaimg.cn/mw690/5c690f6ely1hamoikot8gj20sg11x0zu.jpg',alt:'rabbit05'},
    {url:'https://wx1.sinaimg.cn/mw690/5c690f6ely1hamoikot8gj20sg11x0zu.jpg',alt:'rabbit06'},
    {url:'https://wx3.sinaimg.cn/mw690/5c690f6ely1hamoikoq4zj20sg11xgso.jpg',alt:'rabbit07'},
    {url:'https://wx3.sinaimg.cn/mw690/5c690f6ely1hamoiku9eij20sg11xn3f.jpg',alt:'rabbit08'},
    {url:'https://wx4.sinaimg.cn/mw690/5c690f6ely1hamoikuor4j20sg11x455.jpg',alt:'rabbit09'},
    // 招财兔
    {url:'https://wx3.sinaimg.cn/mw690/5c690f6ely1hamoiktzr3j20sg11xgrw.jpg',alt:'rabbit010'},
  ]

• 将切换逻辑放在 一个单独的函数之中
• 注意 本次随机 要和当前展示的 做对比

写成 箭头函数的写法 是为了让 this指向 本次vue组件实例

随机选取图片函数的逻辑

• 先预防 初始时 current 为空的情况 if(currentImg.value.alt)

• 当前与随机预选--相同时，就只能使用递归思想，重新选取随机新图片

  if(imgData[random].alt === currentImg.value.alt){
      handleRandomImg()
      // 注意退出，否则继续执行后面步骤了
      return
  }
  

• 随机选取图片函数源码

// 使用 箭头函数 写法 是为了让 this指向 本次vue组件实例
// 随机选取图片函数
const handleRandomImg = () => {


  let random = null


  random = (Math.floor(Math.random()*imgData.length)).toString().split('.')[0]


  // 预防 初始时 current 为空的情况
  if(currentImg.value.alt){
    // 当前与随机预选--相同时，递归
    if(imgData[random].alt === currentImg.value.alt){
      handleRandomImg()
      // 注意退出，否则继续执行后面步骤了
      return
    }

  }

  currentImg.value = imgData[random]

}

• 注意--Vue组件创建阶段调用

  // 创建阶段 调用
  handleRandomImg()

拓展:

需求拓展：

• 在点击 随机按钮 之后,让图片展示框的图片(所有图片走马灯一样切换--类似抽奖奖品滚动)
• 目前 想到的时 循环定时器,但是后面思路的没有想到
• 切换效果函数的源码

// 切换图片
let timer = null
const handleToggleImg = ()=>{

  let i=0;

  timer = setInterval(()=>{
    console.log(i)

    if(i===imgData.length-1) {
      clearInterval(timer)
      currentImg.value = {url:'',alt:'no img!'}
    }

    currentImg.value = imgData[i++]    

  },500)

}

// handleToggleImg()

🦖我是Sam9029，一个前端，坚信应无所往

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的掘金主页:Sam9029的掘金主页