使用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翻页时间插件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue 判断两个时间插件结束时间必选大于开始时间的代码
• vue实现书本翻页动画效果实例详解
• Vue实现简易翻页效果源码分享
• vue实现弹窗翻页多选效果
• vue自定义翻页组件的方法
• vue实现数字翻页动画

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！