拆分的计数器

167 阅读1分钟

效果

GIF.gif

就是这样一个效果,假设起始的数字是固定的,因为是有6个展示位置,数字自增到下一位时 本来是0的位置 样式会变黄,所以就把每个数字拆开来判断

<template>
    <div>
       <span v-for="(i, index) in numArr" :key="index" ref="numDom">{{i}}</span>
    </div>
</template>

export default {
    data() {
        return {
          timerId: null,
          numArr: [],
        };
    },
    
    mounted() {
        this.startInterval();
    },
    
     updated() {
    //初始化样式 当数字等于0 或者下标小于等于1时 颜色为透明度0.1
    this.numArr.map((item, index) => {
      if (item === 0 && index <= 1) {
        this.$refs.numDom[index].style = "color:#ffffff;opacity: 0.1;";
      } else {
        this.$refs.numDom[index].style =
          "background-image:linear-gradient(0deg, #e6c056 0%, #ffffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
      }
    });
  },
  
  destroyed() {
    clearInterval(this.timerId);
  },
  
  methods:{
      startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      let a = 0;
      let b = 0;
      let c = 9;
      let d = 9;
      let e = 9;
      let f = 0;
      this.timerId = setInterval(() => {
        f++;
        
        if (f === 10) {
          f = 0;
          e++;
        }

        if (e === 10) {
          e = 0;
          d++;
        }

        if (d === 10) {
          d = 0;
          c++;
        }

        if (c === 10) {
          c = 0;
          b++;
        }

        this.numArr = [a, b, c, d, e, f];
        // console.log(this.numArr);
      }, 2000);
    },
  }
}