Vue實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能

更新時(shí)間：2023年12月20日 11:29:58 作者：Lana學(xué)習(xí)中

這篇文章主要為大家詳細(xì)介紹了如何Vue利用實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下

前言

實(shí)現(xiàn)大屏的實(shí)時(shí)刷新時(shí)間的功能：在大屏中有時(shí)需要實(shí)現(xiàn)顯示日期和當(dāng)前的時(shí)間的功能，且秒數(shù)需要實(shí)時(shí)刷新。

實(shí)現(xiàn)方法

要點(diǎn)：每隔一秒刷新一次。

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

方法補(bǔ)充

vue獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新

1、在data中聲明變量

data() {
    return {
      nowDate: null, //存放年月日變量
      nowTime: null, //存放時(shí)分秒變量
      timer: "", //定義一個(gè)定時(shí)器的變量
      currentTime: new Date(), // 獲取當(dāng)前時(shí)間
    }
  }

2、定義獲取時(shí)間的方法getTime，并在created()聲明周期里面調(diào)用，在實(shí)例創(chuàng)建前調(diào)用

created() 
{
    this.timer = setInterval(this.getTime, 1000);
}

3、具體方法如下：

methods: {
    getTime(){
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour= date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        const str = ''
        if(this.hour>12) {
            this.hour -= 12;
            this.str = " PM";
        }else{
            this.str = " AM";                        
        }
            this.month=check(month);
            this.day=check(day);
            this.hour=check(hour);
            this.minute=check(minute);
            this.second=check(second);
            function check(i){
                const num = (i<10)?("0"+i) : i;
                return num;
            }
            this.nowDate = year + "年" + this.month + "月" + this.day+"日";
            this.nowTime = this.hour + ":" + this.minute + ":" + this.second + this.str;
        },
}

4、離開頁面使用beforeDestroy() 銷毀

beforeDestroy() {
    if (this.timer) {
        clearInterval(this.timer); // 在Vue實(shí)例銷毀前，清除定時(shí)器
    }
}

5、在頁面需要顯示的地方綁定{{ nowDate }},{{ nowTime }}即可

到此這篇關(guān)于Vue實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能的文章就介紹到這了,更多相關(guān)Vue實(shí)時(shí)刷新時(shí)間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: