【vue3】实现大屏实时刷新时间的功能

Lana学习中2023-12-17 16:53

前言

实现大屏的实时刷新时间的功能：在大屏中有时需要实现显示日期和当前的时间的功能，且秒数需要实时刷新。

实现方法

要点：每隔一秒刷新一次。

javascript 复制代码

 <div class="date">
     {{ time.date }} {{ time.week }} {{ time.time }}
</div> 

<script setup>
import { getTime } from '@/utils';

//获取并刷新日期
const time = ref('');
const getDataTime = () => {
    time.value = getTime();
     setTimeout(getDataTime, 1000);
 };
 onMounted(() => {
    getDataTime();
 });
 </script>

//getTime方法
export function getTime() {
  const nowDate = new Date()
  const date = nowDate.getFullYear() + '-' + _formatNum(nowDate.getMonth() + 1) + '-' + _formatNum(nowDate.getDate())
  const time = _formatNum(nowDate.getHours()) + ':' + _formatNum(nowDate.getMinutes()) + ':' + _formatNum(nowDate.getSeconds())
  let week = ''
  switch (nowDate.getDay()) {
    case 0:
      week = '星期天'
      break
    case 1:
      week = '星期一'
      break
    case 2:
      week = '星期二'
      break
    case 3:
      week = '星期三'
      break
    case 4:
      week = '星期四'
      break
    case 5:
      week = '星期五'
      break
    case 6:
      week = '星期六'
      break
    default:
      break
  }
  return {
    date,
    time,
    week
  }
}