toLocaleString方法使用；js获取本地时间年月日和当前周，时分秒动态显示；

本文主要是介绍toLocaleString方法使用；js获取本地时间年月日和当前周，时分秒动态显示；，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本项目是vue3的项目，以vue3为例；
使用toLocaleString方法
年月日：
xxx.toLocaleString('chinese', { year: 'numeric', month: 'long', day: 'numeric' })
当前周：
xxx.toLocaleString('chinese', { weekday: 'short' })
时分秒：
xxx.currentDate.toLocaleString('chinese', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false })

效果图（实际是动态的）

贴代码

<template><div class="nav-top"><div class="nav-center"><span>{{ data.currentDate.toLocaleString('chinese', { year: 'numeric', month: 'long', day: 'numeric' }) }}</span><span>{{ data.currentDate.toLocaleString('chinese', { weekday: 'short' }) }}</span><span>{{ data.currentDate.toLocaleString('chinese', { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }) }}</span></div></div>
</template>
<script setup lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted, onUnmounted, ref, getCurrentInstance, shallowReactive, computed } from "vue";
import { useRouter, RouteLocationRaw } from "vue-router";
import { useUsersStore } from "@/stores/users";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { load } from "@/components/loading/loading";const { proxy } = getCurrentInstance() as any;
//注入用户信息模块状态数据
const users = useUsersStore();
interface DataProps {currentDate: any
}
const data: DataProps = reactive({currentDate: new Date()
});
/*
* 初始化
* 获取动态时间
*/
const updateTime = () => {data.currentDate = new Date();
};
onMounted(() => {updateTime();setInterval(updateTime, 1000);
});
onUnmounted(() => {clearInterval(updateTime);
});
</script>
<style scoped lang="less">
</style>

这篇关于toLocaleString方法使用；js获取本地时间年月日和当前周，时分秒动态显示；的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---