Vue組件實現數字滾動抽獎效果

更新時間：2022年03月08日 11:11:24 作者：遺?忘?

這篇文章主要為大家詳細介紹了Vue組件實現數字滾動抽獎效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue組件實現數字滾動抽獎效果的具體代碼，供大家參考，具體內容如下

可調整數字滾動速度，可指定開獎延遲時間，可指定開獎數字，按個人需求自行改動（錄了個效果供參考，臨時找的錄屏，表介意）
不一一精簡了

組件代碼

<template>
?? ?<div class="info-span04" style="color: #333333;">
?? ??? ?中獎號碼：
?? ??? ?<div style="vertical-align: middle;display: inline-block;">
?? ??? ??? ?<div class="openNumber" v-for="(item, index) in awardCode">
?? ??? ??? ??? ?<div class="num mui-text-center">
?? ??? ??? ??? ??? ?<div class="span value">
?? ??? ??? ??? ??? ??? ?<transition name="down-up-translate-fade">
?? ??? ??? ??? ??? ??? ??? ?<div :key="item.value">{{item.value}}</div>
?? ??? ??? ??? ??? ??? ?</transition>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</template>

<script>
?? ?export default {
?? ??? ?name: 'numberRolling',
?? ??? ?data () {
?? ??? ??? ?return {
?? ??? ??? ??? ?interval: null,
?? ??? ??? ??? ?interval_one: null,
?? ??? ??? ??? ?interval_two: null,
?? ??? ??? ??? ?awardCode: [
?? ??? ??? ??? ??? ?{name: 'oneDigit', value: '?'},
?? ??? ??? ??? ??? ?{name: 'tenDigit', value: '?'},
?? ??? ??? ??? ??? ?{name: 'hundredsDigit', value: '?'}
?? ??? ??? ??? ?],
?? ??? ??? ?}
?? ??? ?},
?? ??? ?props:{
?? ??? ??? ?
?? ??? ?},
?? ??? ?// 開獎效果方法
?? ??? ?methods: {
?? ??? ??? ?start() {
?? ??? ??? ??? ?var _this = this;
?? ??? ??? ??? ?if (!this.interval) {
?? ??? ??? ??? ??? ?let i = 0
?? ??? ??? ??? ??? ?this.interval = setInterval(function() {
?? ??? ??? ??? ??? ??? ?_this.awardCode[0].value = ++i <= 9 ? i : (i=-1,++i)
?? ??? ??? ??? ??? ?}, 100)
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?end(i) {
?? ??? ??? ??? ?this.awardCode[0].value = i;
?? ??? ??? ??? ?this.show = !this.show
?? ??? ??? ??? ?clearInterval(this.interval)
?? ??? ??? ??? ?this.interval = null
?? ??? ??? ?},
?? ??? ??? ?start_one() {
?? ??? ??? ??? ?var _this = this;
?? ??? ??? ??? ?if (!this.interval_one) {
?? ??? ??? ??? ??? ?let j = 0
?? ??? ??? ??? ??? ?this.interval_one = setInterval(function() {
?? ??? ??? ??? ??? ??? ?_this.awardCode[1].value = ++j <= 9 ? j : (j=-1,++j)
?? ??? ??? ??? ??? ?}, 100)
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?end_one(j) {
?? ??? ??? ??? ?this.awardCode[1].value = j;
?? ??? ??? ??? ?clearInterval(this.interval_one)
?? ??? ??? ??? ?this.interval_one = null
?? ??? ??? ?},
?? ??? ??? ?start_two() {
?? ??? ??? ??? ?this.show_two = !this.show_two
?? ??? ??? ??? ?var _this = this;
?? ??? ??? ??? ?let k = 0
?? ??? ??? ??? ?if (!this.interval_two) {
?? ??? ??? ??? ??? ?this.interval_two = setInterval(function() {
?? ??? ??? ??? ??? ??? ?// _this.k = Math.floor(Math.random() * 10);
?? ??? ??? ??? ??? ??? ?// if (k < 10) {
?? ??? ??? ??? ??? ??? ?// ?? ?_this.awardCode[2].value = k++;
?? ??? ??? ??? ??? ??? ?// } else {
?? ??? ??? ??? ??? ??? ?// ?? ?k = 0
?? ??? ??? ??? ??? ??? ?// ?? ?_this.awardCode[2].value = k++;
?? ??? ??? ??? ??? ??? ?// }
?? ??? ??? ??? ??? ??? ?_this.awardCode[2].value = ++k <= 9 ? k : (k=-1,++k)
?? ??? ??? ??? ??? ?}, 100)
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?end_two(k) {
?? ??? ??? ??? ?this.awardCode[2].value = k;
?? ??? ??? ??? ?this.show_two = !this.show_two
?? ??? ??? ??? ?clearInterval(this.interval_two)
?? ??? ??? ??? ?this.interval_two = null
?? ??? ??? ?},
?? ??? ??? ?prizeNumber(code) {
?? ??? ??? ??? ?this.awardCode[0].value = code.substr(0,1)
?? ??? ??? ??? ?this.awardCode[1].value = code.substr(1,1)
?? ??? ??? ??? ?this.awardCode[2].value = code.substr(2,1)
?? ??? ??? ?},
?? ??? ?},
?? ??? ?beforeDestroy: function() {
?? ??? ??? ?if(this.interval){
?? ??? ??? ? ?clearInterval(this.interval)
?? ??? ??? ?}
?? ??? ??? ?if(this.interval_one){
?? ??? ??? ? ?clearInterval(this.interval_one)
?? ??? ??? ?}
?? ??? ??? ?if(this.interval_two){
?? ??? ??? ? ?clearInterval(this.interval_two)
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

<style lang="scss" scoped>
?? ?.openNumber {
?? ??? ?display: inline-block;
?? ??? ?width: vw(52);
?? ??? ?height: vw(52);
?? ??? ?padding-right: vw(36);
?? ??? ?.num {
?? ??? ??? ?width: vw(52);
?? ??? ??? ?height: vw(52);
?? ??? ??? ?overflow: hidden;
?? ??? ??? ?.span {
?? ??? ??? ??? ?color: #fff;
?? ??? ??? ??? ?width: vw(52);
?? ??? ??? ??? ?height: vw(52);
?? ??? ??? ??? ?font-weight: bold;
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?.span div {
?? ??? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?.down-up-translate-fade-enter-active,
?? ??? ??? ?.down-up-translate-fade-leave-active {
?? ??? ??? ??? ?transition: all .1s;
?? ??? ??? ??? ?-webkit-transition: all .1s;
?? ??? ??? ??? ?-moz-transition: all .1s;
?? ??? ??? ??? ?-o-transition: all .1s;
?? ??? ??? ?}
?? ??? ??? ?.down-up-translate-fade-enter,
?? ??? ??? ?.down-up-translate-fade-leave-active {
?? ??? ??? ??? ?opacity: 1;
?? ??? ??? ?}
?? ??? ??? ?.down-up-translate-fade-leave-active {
?? ??? ??? ??? ?transform: translateY(-50px);
?? ??? ??? ??? ?-webkit-transform: translateY(-50px);
?? ??? ??? ??? ?-moz-transform: translateY(-50px);
?? ??? ??? ??? ?-o-transform: translateY(-50px);
?? ??? ??? ?}
?? ??? ??? ?.value {
?? ??? ??? ??? ?background: url('../images/pokinhall-toBeAwarded.png') no-repeat top center;
?? ??? ??? ??? ?background-size: 100% 100%;
?? ??? ??? ??? ?width: vw(52);
?? ??? ??? ??? ?height: vw(52);
?? ??? ??? ??? ?line-height: vw(52);
?? ??? ??? ??? ?font-size: 22px;
?? ??? ??? ??? ?font-weight: bold;
?? ??? ??? ?}
?? ??? ?}
?? ?}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: