1. 程式人生 > 其它 >vue 3.0專案天時分秒倒記計時功能

vue 3.0專案天時分秒倒記計時功能

廢話不多說,先來上圖,看看需求和你們的一樣不,可以用的話,一鍵三連,謝謝

<template>
  <div class="iss-count">
    <div class="count-title">距離直播開始</div>
    <div class="count-time">
      <div class="time-number">{{ day }}</div>
      <span>天</span>
      <div class="time-number">{{ hour }}</div>
      <span>時</span>
      <div class="time-number">{{ minute }}</div>
      <span>分</span>
      <div class="time-number">{{ second }}</div>
      <span>秒</span>
    </div>
    <a-button class="count-btn" type="primary" @click="goTo">
      立即註冊 
>> </a-button> </div> </template> <script> import { reactive, toRefs } from 'vue'; export default { props: ['time', 'url'], setup(props, context) { const state = reactive({ day: '00', hour: '00', minute: '00', second: '00', }); const openTime
= new Date(props.time).getTime(); let timer = setInterval(() => { const now = new Date().getTime(); if (now > openTime) { clearInterval(timer); timer = null; context.emit('fnFinish'); } else { const diff = openTime - now; state.day
= Math.floor(diff / 1000 / 60 / 60 / 24) .toString() .padStart(2, '0'); state.hour = (Math.floor(diff / 1000 / 60 / 60) % 24) .toString() .padStart(2, '0'); state.minute = (Math.floor(diff / 1000 / 60) % 60) .toString() .padStart(2, '0'); state.second = (Math.floor(diff / 1000) % 60) .toString() .padStart(2, '0'); } }, 1000); return { ...toRefs(state), gotTo: () => window.open(props.url) }; }, }; </script> <style lang="less" scoped> .iss-count { padding: 10px; text-align: center; .count-title { font-size: 20px; } .count-time { display: flex; justify-content: center; align-items: flex-end; margin: 50px 0 70px 0; .time-number { width: 35px; height: 40px; line-height: 40px; font-size: 22px; font-weight: bold; color: #fff; background-color: #595959; } span { margin: 0 8px 0 4px; } } .count-btn { padding: 0 40px; } } </style>