时间动态变化（Vue3）

最新推荐文章于 2024-07-20 10:04:47 发布

七月_Mo

最新推荐文章于 2024-07-20 10:04:47 发布

阅读量868

点赞数 1

分类专栏： Vue3.0 Js Vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/Mozifei73/article/details/131103649

版权

Js 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 0 订阅

订阅专栏

该代码段展示了一个使用Vue.js的<scriptsetup>语法实现动态更新当前时间的功能。通过onMounted和onBeforeUnmount生命周期钩子，设置和清除定时器，每秒更新页面上的日期、星期和时间显示。

摘要由CSDN通过智能技术生成

效果

时间动态变化

js部分

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';

let nowtime = ref();

const getTime = () => {
  let date1 = new Date();
  let year = date1.getFullYear();
  let month = date1.getMonth();
  let day = date1.getDate();
  let xinqi = date1.getDay();
  let w = ['日', '一', '二', '三', '四', '五', '六'];
  let hh = date1.getHours();
  let mm = date1.getMinutes();
  let ss = date1.getSeconds() < 10 ? '0' + date1.getSeconds() : date1.getSeconds();
  //let date = year + "年" + (month + 1) + "月" + day + "日   星期" + xinqi + "  " + hh + ":" + mm + ":" + ss
  let date = year + '年' + (month + 1) + '月' + day + '日';
  //let  week = "星期" +xinqi //星期6
  let week = '星期' + w[xinqi]; //星期六
  let realTime = hh + ':' + mm + ':' + ss;
  document.getElementById('tobaccoTime1').innerHTML = date;
  document.getElementById('tobaccoTime2').innerHTML = week;
  document.getElementById('tobaccoTime3').innerHTML = realTime;
  // console.log(date, week, realTime); //最终得到时间 2022年11月24日 星期四 16:10:45
};
onMounted(() => {
  //启动定时器
  nowtime.value = setInterval(() => {
    getTime();
  }, 1000);
});
onBeforeUnmount(() => {
  // 在组件消费前，销毁定时器
  clearInterval(nowtime.value);
});
</script>

html部分

<template>
  <div class="header">
    <div class="timer">
      <div id="headerTime" class="header-time text">
        <span class="header-time-span1" id="tobaccoTime1"></span>&nbsp;&nbsp;&nbsp;
        <span class="header-time-span2 middle" id="tobaccoTime2"></span>
        <span class="header-time-span3 middle" id="tobaccoTime3"></span>
      </div>
    </div>
    <div class="title">*****平台</div>
  </div>
</template>