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

最新推荐文章于 2024-06-17 15:58:06 发布

Lana学习中

最新推荐文章于 2024-06-17 15:58:06 发布

阅读量1.1k

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sinat_41838682/article/details/134963500

版权

前言

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

实现方法

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

 <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
  }
}