时间滚动效果组件

唐生洗发用飘柔

已于 2022-07-11 15:05:38 修改

阅读量384

点赞数

于 2022-07-08 18:06:37 首次发布

本文链接：https://blog.csdn.net/lys1925/article/details/125683613

版权

Vue 时间滚动数字时钟 liv-for 动态更新

关键词由CSDN通过智能技术生成

时间滚动效果组件

<template>
  <div class="time">
    <ul class="numbers hoursFirst">
      <li  v-for="(item, index) in arr" class="liItem" :key="index">{{item}}</li>
    </ul>
    <ul class="numbers hoursLast">
      <li  v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <span class="icon">:</span>
    <ul class="numbers minutesFirst">
      <li  v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <ul class="numbers minutesLast">
      <li  v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <span class="icon">:</span>
    <ul class="numbers secondsFirst">
      <li  v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <ul class="numbers secondsLast">
      <li  v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      timeObj: null,
      arr:[0,1,2,3,4,5,6,7,8,9]
    }
  },
  beforeDestroy() {
    if(this.timeObj){
      clearInterval(this.timeObj)
    }
  },
  mounted(){
    this.move()
    this.timeObj = setInterval(()=>{
      this.move()
    },1000)
  },
  methods:{
    getFirstDigit(number){
      return parseInt(number / 10);
    },
    getLastDigit(number){
      return number%10;
    },
    move(){
      var myDate = new Date();
      var seconds = myDate.getSeconds();
      var minutes = myDate.getMinutes();
      var hours = myDate.getHours();
      let _this = this
      var animateFirstDigit = function(className,property){
        var divBox = document.getElementsByClassName(className)[0]
        var itemLiHight = getComputedStyle(divBox, false).height.replace('px','')
        var height = (itemLiHight/10).toFixed(2)
        var num = _this.getFirstDigit(property)
        divBox.style.top =  -(num * height)+'px'
      }

      var animateSecondDigit = function(className,property){
        var divBox = document.getElementsByClassName(className)[0]
        var itemLiHight = getComputedStyle(divBox, false).height.replace('px','')
        var height = (itemLiHight/10).toFixed(2)
        var num = _this.getLastDigit(property)
        divBox.style.top =  -(num * height)+'px'
      }
      animateFirstDigit("hoursFirst",hours);
      animateSecondDigit("hoursLast",hours);
      animateFirstDigit("minutesFirst",minutes);
      animateSecondDigit("minutesLast",minutes);
      animateFirstDigit("secondsFirst",seconds);
      animateSecondDigit("secondsLast",seconds);
    }

  }
}
</script>