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

目录

• 效果图
• 代码
• 总结

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

效果图

clock

代码

<template>
  <div>
    <div>
      <p>{{dateToday}}</p>
      <span>{{$t(weekDay)}}</span>

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

      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[0]"></div>
        <div
             :data-number="nowTimes[0]"></div>
      </div>
      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[1]"></div>
        <div
             :data-number="nowTimes[1]"></div>
      </div>
      <em :class="timeLab==="AM"?"divider amcolor":"divider pmcolor""> <i></i></em>
      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[2]"></div>
        <div
             :data-number="nowTimes[2]"></div>
      </div>
      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[3]"></div>
        <div
             :data-number="nowTimes[3]"></div>
      </div>

      <em :class="timeLab==="AM"?"divider amcolor":"divider pmcolor""> <i></i></em>
      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[4]"></div>
        <div
             :data-number="nowTimes[4]"></div>
      </div>
      <div :class="timeLab==="AM"?"flip amcolor":"flip pmcolor"">
        <span></span>
        <span></span>
        <div
             :data-number="nextTimes[5]"></div>
        <div
             :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翻页时间插件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！