[JavaScript知识库]做试题中，实现答案选择后的 “连对” 效果组件的封装以及页面中引用

需求：用户选择后，连续4道题答对，就出现一个great样式和音效

思路：

1、组件中没有点击事件，需要watch去监听传递过来的值，并且去赋值等相关操作

2、在页面中引入组件，并判断 正确答案===用户答案，就初始化一个变量?correctNum，判断为true时，correctNum++，为false时，correctNum=0

创建组件文件 evenForCount.vue

<template>
  <!-- 连对组件 -->
  <div class="even_for">
      <div class="even_item">
          <img class="even4" src="@/assets/home/ok4.png" alt="" />
      </div>
      <div class="even_item">
          <img class="even6" src="@/assets/home/ok6.png" alt="" />
      </div>
      <div class="even_item">
          <img class="even8" src="@/assets/home/ok8.png" alt="" />
      </div>
      <div class="even_item">
          <img class="even10" src="@/assets/home/ok10.png" alt="" />
      </div>
      <!-- 提示音效 -->
      <div class="hint_audio">
        <!-- 4 great -->
        <audio class="audio4" controls>
          <source src="@/assets/home/great.mp3" type="audio/mpeg" />
        </audio>
        <!-- 6 excellent -->
        <audio class="audio6" controls>
          <source src="@/assets/home/excellent.mp3" type="audio/mpeg" />
        </audio>
        <!-- 8 unbelievable -->
        <audio class="audio8" controls>
          <source src="@/assets/home/unbelievable.mp3" type="audio/mpeg" />
        </audio>
        <!-- 10 amazing -->
        <audio class="audio10" controls>
          <source src="@/assets/home/amazing.mp3" type="audio/mpeg" />
        </audio>
      </div>
  </div>
</template>
<script>
export default {
  /**
   * 1：为isRight做+ -
   * 2：isRight传值
   * 3：监听值
   * 4：变化效果
   */
  props: {
    isRight: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      evenforCount: 0, // 连续正确次数
      evenforCountMax: 4
    }
  },
  watch: {
    isRight (newVal) {
      this.evenforCount = newVal
    },
    evenforCount (newVal) {
      newVal >= this.evenforCountMax && this.evenFor()
    }
  },
  methods: {
    // 连续答题正确 触发 效果和音效
    evenFor () {
      let count = this.evenforCount
      if (count === 4) {
        let e4 = document.getElementsByClassName('even4')[0].classList
        e4.contains('disnone') && e4.remove('disnone')
        setTimeout(() => {
          document.getElementsByClassName('audio4')[0].play()
          e4.add('disblock')
        }, 200)
        setTimeout(() => e4.add('disnone'), 1000)
      } else if (count === 6) {
        let e6 = document.getElementsByClassName('even6')[0].classList
        e6.contains('disnone') && e6.remove('disnone')
        setTimeout(() => {
          document.getElementsByClassName('audio6')[0].play()
          e6.add('disblock')
        }, 200)
        setTimeout(() => e6.add('disnone'), 1000)
      } else if (count === 8) {
        let e8 = document.getElementsByClassName('even8')[0].classList
        e8.contains('disnone') && e8.remove('disnone')
        setTimeout(() => {
          document.getElementsByClassName('audio8')[0].play()
          e8.add('disblock')
        }, 200)
        setTimeout(() => e8.add('disnone'), 1000)
      } else if (count === 10) {
        let e10 = document.getElementsByClassName('even10')[0].classList
        e10.contains('disnone') && e10.remove('disnone')
        setTimeout(() => {
          document.getElementsByClassName('audio10')[0].play()
          e10.add('disblock')
        }, 200)
        setTimeout(() => e10.add('disnone'), 1000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 提示音
.hint_audio {
  .audio4,
  .audio6,
  .audio8,
  .audio10 {
    width: 0;
    display: none;
  }
}
// 图标
.even_for {
  position: fixed;
  left: 0;
  top: 40%;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .even_item {
    width: 50%;
    display: inline-block;
    img {
      width: 300px;
    }
    .even4,
    .even6,
    .even8,
    .even10 {
      display: none;
    }
  }
}
/* 淡入-从左 */
.disblock {
  display: inline-block !important;
  -webkit-animation-name: fadeinL;
  -moz-animation-name: fadeinL;
  -ms-animation-name: fadeinL;
  animation-name: fadeinL;
}
@keyframes fadeinL {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 淡出-向右 */
.disnone {
  display: none !important;
  -webkit-animation-name: fadeoutR;
  -moz-animation-name: fadeoutR;
  -ms-animation-name: fadeoutR;
  animation-name: fadeoutR;
}
@keyframes fadeoutR {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0.5;
    transform: translateX(50px);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}
</style>

页面调用

<template>
    <div class="entest_page">
      <!-- 内容 -->
      <swiper class="swiper-container" ref="mySwiper" :options="swiperOptions">
        <swiper-item class="swiper-slide swiper-no-swiping" v-for="(eng, engId) in basicsList" :key="engId" :ref="'item' + eng">
          <div class="entest_content">
            <div class="entest_list">
              <div class="entest_item">
                <div class="entest_title">
                  <div class="p_nei" v-if="!eng.title.match(/<img[^>]+>/g)" v-html="eng.title"></div>
                  <div class="p_nei" v-if="eng.title.match(/<img[^>]+>/g)">
                    <div class="img_box" v-for="(imgdd,imgIndex) in eng.title.match(/<img[^>]+>/g)" :key="imgIndex">
                      <p v-html="imgdd"></p>
                    </div>
                  </div>
                </div>
                <!-- 英译汉 汉译英 填空题（选择题） -->
                <div class="entest_options" v-for="(op, opId) in JSON.parse(eng.candidateAnswer)" :key="opId">
                  <div class="option_item" @click="throttleChangeNo(eng, op.name, engId)" :class="changeItem(eng.userAnswer, eng.rightAnswer, op.name)">
                    <marquee v-html="op.name + '.&nbsp;' + op.value"></marquee>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-item>
      </swiper>
      <!-- 连对 -->
      <EvenForCount :isRight="correctNum"></EvenForCount>
    </div>
</template>
<script>
import EvenForCount from '@/components/English/evenForCount'

export default {
  components: {
    EvenForCount
  },
  data () {
    return {
      correctNum: 0, // 正确数量
    }
  },
  methods: {
    // 切换选项
    ChangeNo () {
                         // 正确答案 === 用户答案
      let currentRigth = rightAnswer === userAnswer 
      if (currentRigth === true) { // 答题正确就 +1
        this.correctNum++
      } else {                     // 答题错误就 =0
        this.correctNum = 0  
      }
    }
  }
}
</script>

? ? ? ?希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~