vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue翻页时间插件

使用vue写一个翻页的时间插件实例代码

作者:青衣浏阳

最近在做自己项目中遇到一个非常简单的功能,跟大家分享下,这篇文章主要给大家介绍了关于使用vue写一个翻页的时间插件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

读秒效果有一个从上向下的翻页效果

效果图

clock

代码

<template>
  <div class="dateClock">
    <div class="todayClass">
      <p class="datep">{{dateToday}}</p>
      <span style="float:right;font-size:16px">{{$t(weekDay)}}</span>

    </div>
    <div class="clock">
      <div :class="timeLab==='AM'?'labelTip amstyle':'labelTip pmstyle'">
        <span>{{timeLab}}</span>
      </div>

      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[0]"></div>
        <div class="digital back"
             :data-number="nowTimes[0]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[1]"></div>
        <div class="digital back"
             :data-number="nowTimes[1]"></div>
      </div>
      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[2]"></div>
        <div class="digital back"
             :data-number="nowTimes[2]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[3]"></div>
        <div class="digital back"
             :data-number="nowTimes[3]"></div>
      </div>

      <em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[4]"></div>
        <div class="digital back"
             :data-number="nowTimes[4]"></div>
      </div>
      <div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'">
        <span class="rightline"></span>
        <span class="leftline"></span>
        <div class="digital front"
             :data-number="nextTimes[5]"></div>
        <div class="digital back"
             :data-number="nowTimes[5]"></div>
      </div>

    </div>
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import DateUtil from "@/utils/dateUtil";
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      nowTimes: [],
      nextTimes: [],
      timer: {},
      timeLab: 'AM',
      dateToday: '',
      weekDay: '',
      timeKey: 0
    });
    onMounted(() => {
      initDate();
      data.timer = setInterval(() => {
        updateTime();
      }, 1000)
    });

    const initDate = async () => {
      let now = new Date();
      data.dateToday = proxy.$moment(now).format('MMM D, YYYY')
      let nowWeek = now.getDay()
      data.weekDay = DateUtil.returnWeek()[nowWeek]
      data.nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));
      data.nextTimes = getTimeFromDate(now)
    }
    const updateTime = () => {
      let now = new Date();
      data.timeKey = now
      let nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));
      let nextTimes = getTimeFromDate(now);
      data.nowTimes = nowTimes
      // console.log('nowTimes', nowTimes)
      for (let i = 0; i < 6; i++) {
        if (nowTimes[i] !== nextTimes[i]) {
          //  setSpin(i, nowTimes[i], nextTimes[i]);
          setSpin(i, nowTimes, nextTimes);
        }
      }
    }
    // 执行翻页操作
    const setSpin = (index, nowTime, nextTime) => {
      let nodes = document.querySelectorAll(".flip");
      if (nodes.length) {
        nodes[index].classList.add('running');
        //   data.nowTimes.splice(index, 1, nowTime);
        data.nowTimes = nowTime
        setTimeout(() => {
          nodes[index].classList.remove('running');
          //  data.nowTimes.splice(index, 1, nextTime);
          //  data.nextTimes.splice(index, 1, nextTime);

          data.nowTimes = nextTime
          data.nextTimes = nextTime
        }, 800)
      } else {
        clearInterval(data.timer);
        data.timer = null
      }
    }
    // 获取时间显示参数
    const getTimeFromDate = (date) => {
      let numTime = [];
      let timeStr = proxy.$moment(date).format("hh:mm:ss A")
      // let timeStr = proxy.$moment(date).format("hh:mm A")
      data.timeLab = timeStr.split(' ')[1]
      let time1 = timeStr.split(' ')[0].split(':').join("")
      for (let i = 0; i < time1.length; i++) {
        numTime.push(parseInt(time1[i]));
      }
      return numTime
    }
    //销毁

    return {
      ...toRefs(data),
      initDate,
      updateTime,
      setSpin,
      getTimeFromDate,
    };
  }
}

</script>

<style lang="scss" scoped>
.dateClock {
   display: flex;
   .todayClass {
      padding-right: 5px;
      .datep {
         font-size: 30px;
         padding-top: 5px;
      }
   }
   .clock {
      display: flex;
   }
}

.clock .divider {
   font-size: 40px;
   line-height: 47px;
   .iconfont {
      margin-right: 0;
   }
}
.clock .flip {
   position: relative;
   width: 44px;
   height: 60px;
   margin: 2px;
   font-size: 40px;
   line-height: 60px;
   text-align: center;
   background: #ffffff;
   border: 1px solid #b8b8b8;
   border-radius: 4px;

   .leftline {
      position: absolute;
      left: 0;
      top: 26px;
      width: 0;
      height: 8px;
      border: 1px solid #b8b8b8;
      z-index: 5;
   }
   .rightline {
      position: absolute;
      right: 0;
      top: 26px;
      width: 0;
      height: 8px;
      border: 1px solid #b8b8b8;
      z-index: 5;
   }
}
.amcolor {
   color: #ff43a1;
}
.pmcolor {
   color: #1890ff;
}
.labelTip {
   width: 44px;
   height: 60px;
   margin: 2px;
   line-height: 60px;
   text-align: center;
   border-radius: 4px;
   font-size: 16px;
   font-weight: bold;
   color: #fff;
}
.amstyle {
   background-color: #ff43a1;
}
.pmstyle {
   background-color: #1890ff;
}
.clock .flip .digital::before,
.clock .flip .digital::after {
   position: absolute;
   content: attr(data-number);
   left: 0;
   right: 0;
   background: #fff;
   overflow: hidden;
   -webkit-perspective: 160px;
   perspective: 160px;
}
.clock .flip .digital::before {
   top: 0;
   bottom: 50%;
   border-bottom: 1px solid #fff;
   border-radius: 4px 4px 0 0;
}
.clock .flip .digital::after {
   top: 50%;
   bottom: 0;
   line-height: 0;
   border-radius: 0 0 4px 4px;
   background: linear-gradient(180deg, #ffffff, #ffffff 68%, #e2e2e2);
}
.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 1s ease-in-out;
   animation: frontFlipDown 1s ease-in-out;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}
.clock .flip.running .back::after {
   -webkit-animation: backFlipDown 1s ease-in-out;
   animation: backFlipDown 1s 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>

总结

到此这篇关于使用vue写一个翻页的时间插件的文章就介绍到这了,更多相关vue翻页时间插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文