hldy_app_mini/component/public/newgame/sxy-Timeing.vue

<template>
	<view style="display: flex;align-items: center;"  :class="!isDown?'red':''">
		<view class="box" id="box_minute" @click="chongzhi()">
		  <view class="top child text" id="top" >{{ Math.floor(topTime / 60)  }}</view>
		  <view class="flip child" id="flip" :style="{ transform: transformInfomin?transformInfo:'' }">
		    <view  class="flip_face child text" :style="{ zIndex: faceZindexmin || 0 }" id="flip_face"  >
		      {{ Math.floor(bottomTime / 60) }}
		    </view>
		    <view  class="flip_back child text" :style="backZindex&&transformInfomin ? { zIndex: backZindex } : {}" id="flip_back" >
		      {{ Math.floor(topTime / 60) }}
		    </view>
		  </view>
		  <view class="bottom child text" id="bottom" >{{ Math.floor(bottomTime / 60) }}</view>
		</view>
		:
		<view class="box" id="box_minute"  :class="!isDown?'red':''">
		  <view class="top child text" id="top">{{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}</view>
		  <view class="flip child" id="flip" :style="{ transform: transformInfo }"  >
		    <view  class="flip_face child text" :style="{ zIndex: faceZindex || 0 }" id="flip_face"  >
		      {{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60)}}
		    </view>
		    <view  class="flip_back child text" :style="backZindex ? { zIndex: backZindex } : {}" id="flip_back" >
		      {{ (topTime % 60)<10?'0'+(topTime % 60) : (topTime % 60) }}
		    </view>
		  </view>
		  <view class="bottom child text" id="bottom">{{ (bottomTime % 60)<10? '0'+(bottomTime % 60) : (bottomTime % 60) }}</view>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    initTime: {
      // 初始时间
      type: Number,
      default:3600,
    },
    // isDown: {
    //   // 是否是倒计时
    //   type: Boolean,
    //   default: true,
    // },
    threshold: {
      // 阈值
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      topTime: this.initTime,
      bottomTime: this.initTime,
      faceZindex: 1,
      backZindex: 0,
      transformInfo: "perspective(500rpx) rotateX(0deg)",
	  transformInfomin: false,
	  faceZindexmin: 1,
	  backZindexmin: 0,
	  mintime:0,
      timer: null,
      timerTwo: null,
	  isDown:true
    };
  },
  mounted() {
    this.cycle();
  },
  methods: {
    OneCycle(n) {
      // 一次翻页的周期
      let num = 0;
      this.transformInfo = "perspective(500rpx) rotateX(0deg)";
      this.faceZindex = 1;
      this.backZindex = 0;
	  this.bottomTime = this.isDown? n : n-1;
	  let minutes = Math.floor(n / 60);
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        num++;
        if (num > 50) {
          num = 0;
          clearInterval(this.timer);
          return;
        }

        if (num === 1) {
			if (this.isDown) {
				this.topTime = n - 1 < this.threshold ? n : n - 1; // 60 和 0 在时间里，其实是一样的
				this.mintime = Math.floor(this.topTime / 60)
				if(minutes != this.mintime ){
					this.transformInfomin = true;
				}else{
					this.transformInfomin = false;
				}
			  } else {
				this.topTime = n + 1 > this.threshold ? n : n + 1;
				this.mintime = Math.floor(this.topTime / 60)
				if(minutes != this.mintime ){
					this.transformInfomin = true;
				}else{
					this.transformInfomin = false;
				}
			  }
			}

        this.faceZindex = num <= 25 ? 1 : 0;
        this.backZindex = num <= 25 ? 0 : 1;

        this.transformInfo = `perspective(500rpx) rotateX(-${(180 * num) / 50}deg)`;
     
	  }, 20); // 将一秒钟分成50份。
    },
    cycle() {
		let minutes = Math.floor(this.initTime / 60);
      let time = this.initTime;
	  console.log(minutes,time)
      this.timerTwo = setInterval(() => {
        const flag = this.isDown ? time - 1 : time + 1;
        if (flag === this.threshold) {
			this.isDown = false
          // clearInterval(this.timerTwo);
          // clearInterval(this.timer);
        }
        this.OneCycle(time);
        this.isDown ? time-- : time++;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="less">
.red{
	color: red !important;
	view{
		color: red !important;
	}
}
.box {
  position: relative;
  box-sizing: border-box;
}

.box .child {
  width: 3.4vw;
  height: 1.6vw;
  overflow: hidden;
}

.box > .top {
  background-color: #DCDCDC;
  line-height: 3.2vw;
  border-bottom: 2rpx solid #fff;
  border-radius: 4rpx 4rpx 0 0;
}

.box .flip {
  position: absolute;
  top: 0rpx;
  z-index: 1;
  transform-origin: bottom;
  border-radius: 4rpx 4rpx 0 0;
}

.box .flip .flip_face {
  position: absolute;
  background-color: #DCDCDC;
  line-height: 3.2vw;
  z-index: 1;
  border-bottom: 2rpx solid #fff;
}

.box .flip .flip_back {
  position: absolute;
  background-color: #DCDCDC;
  line-height: 0rpx;
  transform: perspective(500rpx) rotateX(0deg) rotateY(-180deg) rotate(180deg);
  border-top: 2rpx solid #fff;
}

.box .bottom {
  background-color: #DCDCDC;
  line-height: 0rpx;
  border-top: 2rpx solid #fff;
  border-radius: 0 0 4rpx 4rpx;
}

.text {
  text-align: center;
  font-size: 2.2vw;
  font-weight: 900;
  color: #666;
}
</style>