电子时钟滚动效果实现

<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>
        <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>
        <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{
            arr:[0,1,2,3,4,5,6,7,8,9]
        }
    },
    mounted(){
        this.move()
        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);
        }
  
  
  
  
//   setInterval(move,1000);
    }
}
</script>



<style lang="scss" scoped>
.time{
  height:50px;
  width: 100%;
  background-color: #fff;
//   padding:0px 10px;
  text-align:center;
  border-radius:5px;
  overflow:hidden;
  font-size: 16px;
}
ul.numbers{
  list-style-type:none;
  padding:0;
  position:relative;
  display:inline-block;
  transition:all ease 0.5s;
  margin:0px;
  border-radius:5px;
  background-color: #fff;
  li{
    height:50px;
    width:16px;
    text-align:center;
    line-height:50px;
    font-weight:800;
  }
  &.hoursFirst,&.hoursLast{
    color:#422a2d;
  }
  &.minutesFirst,&.minutesLast{
    color:#422a2d;
  }
  &.secondsFirst,&.secondsLast{
    color:#212121;
  }
  &.minutesFirst,&.secondsFirst{
    margin-left: 10px !important
  }
}
</style>

例子2

<template>
    <div class="clock">
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[0]"></div>
            <div class="digital back" :data-number="nowTimes[0]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[1]"></div>
            <div class="digital back" :data-number="nowTimes[1]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[2]"></div>
            <div class="digital back" :data-number="nowTimes[2]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[3]"></div>
            <div class="digital back" :data-number="nowTimes[3]"></div>
        </div>
        <em class="divider">:</em>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[4]"></div>
            <div class="digital back" :data-number="nowTimes[4]"></div>
        </div>
        <div class="flip">
            <div class="digital front" :data-number="nextTimes[5]"></div>
            <div class="digital back" :data-number="nowTimes[5]"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ClockData",
        data () {
            return {
                duration: 650,
                nowTimes: [],
                nextTimes: [],
                timer: {},
            }
        },
        mounted() {
            this.initDate();
            this.timer = setInterval(() => {
                this.updateTime();
            }, 1000)
        },
        methods: {
            initDate() {
                let now = new Date();
                this.nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
                this.nextTimes = this.getTimeFromDate(now);
            },
            updateTime() {
                let now = new Date();
                let nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000));
                let nextTimes = this.getTimeFromDate(now);
                for (let i = 0; i < 6; i++) {
                    if (nowTimes[i] !== nextTimes[i]) {
                        this.setSpin(i, nowTimes[i], nextTimes[i]);
                    }
                }
            },
            setSpin(index, nowTime, nextTime) {
                let nodes = document.querySelectorAll(".flip");
                nodes[index].classList.add('running');
                this.nowTimes.splice(index, 1, nowTime);
                this.nextTimes.splice(index, 1, nextTime);
                setTimeout(() => {
                    nodes[index].classList.remove('running');
                    this.nowTimes.splice(index, 1, nextTime);
                }, this.duration)
            },
            getTimeFromDate(date) {
                let numTime = [];
                let timeStr = date
                    .toTimeString()
                    .slice(0, 8)
                    .split(":")
                    .join("");
                for (let i = 0; i < timeStr.length; i++) {
                    numTime.push(parseInt(timeStr[i]));
                }
                return numTime;
            }
        },
        destroyed() {
            // 销毁定时器
            clearInterval(this.timer);
        }
    }
</script>

<style scoped>
    .clock {
        display: flex;
    }
    .clock .divider {
        font-size: 66px;
        line-height: 102px;
        font-style: normal;
    }
    .clock .flip {
        position: relative;
        width: 60px;
        height: 100px;
        margin: 2px;
        font-size: 66px;
        line-height: 100px;
        text-align: center;
        background: white;
        border: 1px solid black;
        border-radius: 12px;
    }
    .clock .flip .digital::before, .clock .flip .digital::after {
        position: absolute;
        content: attr(data-number);
        left: 0;
        right: 0;
        color: white;
        background: black;
        overflow: hidden;
        -webkit-perspective: 160px;
        perspective: 160px;
    }
    .clock .flip .digital::before {
        top: 0;
        bottom: 50%;
        border-bottom: 1px solid #666;
        border-radius: 10px 10px 0 0;
    }
    .clock .flip .digital::after {
        top: 50%;
        bottom: 0;
        line-height: 0;
        border-radius: 0 0 10px 10px;
    }
    .clock .flip .back::before,
    .clock .flip .front::after {
        z-index: 1;
    }
    .clock .flip .back::after {
        z-index: 2;
    }
    .clock .flip .front::before {
        z-index: 3;
    }
    .clock .flip .back::after {
        -webkit-transform-origin: center top;
        transform-origin: center top;
        -webkit-transform: rotateX(0.5turn);
        transform: rotateX(0.5turn);
    }
    .clock .flip.running .front::before {
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation: frontFlipDown 0.6s ease-in-out;
        animation: frontFlipDown 0.6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .clock .flip.running .back::after {
        -webkit-animation: backFlipDown 0.6s ease-in-out;
        animation: backFlipDown 0.6s ease-in-out;
    }
    @-webkit-keyframes frontFlipDown {
        to {
            -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
        }
    }
    @keyframes frontFlipDown {
        to {
            -webkit-transform: rotateX(0.5turn);
            transform: rotateX(0.5turn);
        }
    }
    @-webkit-keyframes backFlipDown {
        to {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
        }
    }
    @keyframes backFlipDown {
        to {
            -webkit-transform: rotateX(0);
            transform: rotateX(0);
        }
    }
</style>