[JavaScript知识库]vue3.0 获取日期时间，星期

<!--

?* @Description:

?* @Author: wwf

?* @Date: 2022-03-31 14:04:35

?* @LastEditTime: 2022-03-31 16:08:59

?* @LastEditors: wwf

-->

<template>

? <div class="globalHeader">

? ? <div class="globalHeaderContent">

? ? ? <div class="globalHeaderContent_title">

? ? ? ? <img src="../../assets/header/logo.png" alt="" />

? ? ? ? <span>南水北调小洪河监测站数字孪生平台</span>

? ? ? </div>

? ? ? <div class="globalHeaderContent_tab">

? ? ? ? <ul>

? ? ? ? ? <li

? ? ? ? ? ? :class="{ active: showIndex == index }"

? ? ? ? ? ? v-for="(item, index) in list"

? ? ? ? ? ? :key="index"

? ? ? ? ? ? @click="clickItem(index)"

? ? ? ? ? >

? ? ? ? ? ? {{ item.name }}

? ? ? ? ? </li>

? ? ? ? </ul>

? ? ? </div>

? ? ? <div class="globalHeaderContent_date">

? ? ? ? <div class="date">

? ? ? ? ? <div class="time">{{ time }}</div>

? ? ? ? ? <div class="dateTime">

? ? ? ? ? ? <div>{{ week }}</div>

? ? ? ? ? ? <div>{{ date }}</div>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <div class="pm">PM 52</div>

? ? ? ? <div class="shidu">湿度 26%RH</div>

? ? ? ? <div class="tem">

? ? ? ? ? <img src="../../assets/header/sun.png" alt="" />

? ? ? ? ? 17 ℃

? ? ? ? </div>

? ? ? </div>

? ? </div>

? </div>

</template>

<script lang="ts">

import { defineComponent, reactive, toRefs } from 'vue'

interface dataType {

? date: string

? time: string

? week: string

? showIndex: Number

}

export default defineComponent({

? name: 'GlobalHeader',

? setup() {

? ? const list: any[] = [

? ? ? {

? ? ? ? name: '监测数据'

? ? ? },

? ? ? {

? ? ? ? name: '设施调控'

? ? ? },

? ? ? {

? ? ? ? name: '巡检养护'

? ? ? },

? ? ? {

? ? ? ? name: '防护预警'

? ? ? }

? ? ]

? ? const state: dataType = reactive({

? ? ? date: '',

? ? ? time: '',

? ? ? week: '',

? ? ? showIndex: 0

? ? })

? ? // 获取时间接口

? ? const getTime = async () => {

? ? ? var myDate = new Date()

? ? ? let month = (myDate.getMonth() + 1).toString().padStart(2, '0')

? ? ? let day = myDate.getDate().toString().padStart(2, '0')

? ? ? let hour = myDate.getHours().toString().padStart(2, '0')

? ? ? let minutes = myDate.getMinutes().toString().padStart(2, '0')

? ? ? let seconed = myDate.getSeconds().toString().padStart(2, '0')

? ? ? state.date = myDate.getFullYear() + '-' + month + '-' + day

? ? ? state.time = hour + ':' + minutes + ':' + seconed

? ? }

? ? // 获取当前星期几

? ? const getWeekDate = () => {

? ? ? var now = new Date()

? ? ? var day = now.getDay()

? ? ? var weeks = [

? ? ? ? '星期日',

? ? ? ? '星期一',

? ? ? ? '星期二',

? ? ? ? '星期三',

? ? ? ? '星期四',

? ? ? ? '星期五',

? ? ? ? '星期六'

? ? ? ]

? ? ? state.week = weeks[day]

? ? }

? ? getTime()

? ? getWeekDate()

? ? setInterval(() => {

? ? ? getWeekDate()

? ? }, 1000 * 60 * 60 * 24)

? ? setInterval(() => {

? ? ? getTime()

? ? }, 1000)

? ? const clickItem = (index: any) => {

? ? ? state.showIndex = index

? ? }

? ? return {

? ? ? ...toRefs(state),

? ? ? list,

? ? ? clickItem

? ? }

? }

})

</script>

<style scoped lang="scss">

.globalHeader {

? position: absolute;

? top: 0;

? left: 0;

? width: 1920px;

? height: 80px;

? background-color: #717f99;

? padding-top: 10px;

? .globalHeaderContent {

? ? width: 1920px;

? ? height: 70px;

? ? background: url('../../assets/header/header.png') no-repeat;

? ? background-size: cover;

? ? display: flex;

? ? flex-direction: row;

? ? justify-content: space-between;

? ? align-items: center;

? ? .globalHeaderContent_title {

? ? ? flex: 1;

? ? ? img {

? ? ? ? width: 71px;

? ? ? ? height: 71px;

? ? ? ? margin: 0 20px;

? ? ? ? vertical-align: bottom;

? ? ? }

? ? ? span {

? ? ? ? display: inline-block;

? ? ? ? font-size: 30px;

? ? ? ? font-family: Source Han Sans SC-Bold, Source Han Sans SC;

? ? ? ? font-weight: bold;

? ? ? ? color: #ffffff;

? ? ? ? line-height: 65px;

? ? ? ? text-shadow: 2px 2px 2px #000000;

? ? ? ? -webkit-background-clip: text;

? ? ? ? // -webkit-text-fill-color: transparent;

? ? ? }

? ? }

? ? .globalHeaderContent_tab {

? ? ? flex: 1;

? ? ? margin-left: 85px;

? ? ? ul {

? ? ? ? display: flex;

? ? ? ? flex-direction: row;

? ? ? ? justify-content: space-around;

? ? ? ? align-items: center;

? ? ? ? li {

? ? ? ? ? font-size: 20px;

? ? ? ? ? font-family: Source Han Sans SC-Medium, Source Han Sans SC;

? ? ? ? ? font-weight: 500;

? ? ? ? ? color: #ffffff;

? ? ? ? ? line-height: 30px;

? ? ? ? ? text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.67);

? ? ? ? ? -webkit-background-clip: text;

? ? ? ? ? cursor: pointer;

? ? ? ? }

? ? ? ? .active {

? ? ? ? ? font-size: 24px;

? ? ? ? ? font-family: Source Han Sans SC-Medium, Source Han Sans SC;

? ? ? ? ? font-weight: 500;

? ? ? ? ? color: #f1feff;

? ? ? ? ? line-height: 65px;

? ? ? ? ? text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.67);

? ? ? ? ? -webkit-background-clip: text;

? ? ? ? ? cursor: pointer;

? ? ? ? ? border-bottom: 3px solid #24d8b9;

? ? ? ? }

? ? ? }

? ? }

? ? .globalHeaderContent_date {

? ? ? flex: 1;

? ? ? display: flex;

? ? ? flex-direction: row;

? ? ? justify-content: space-around;

? ? ? align-items: center;

? ? ? .date {

? ? ? ? display: flex;

? ? ? ? flex-direction: row;

? ? ? ? justify-content: flex-start;

? ? ? ? align-items: center;

? ? ? ? margin-left: 40px;

? ? ? ? .time {

? ? ? ? ? font-size: 26px;

? ? ? ? ? font-family: PingFang SC-Regular, PingFang SC;

? ? ? ? ? font-weight: 400;

? ? ? ? ? color: #ffffff;

? ? ? ? ? line-height: 0px;

? ? ? ? ? letter-spacing: 2px;

? ? ? ? ? text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);

? ? ? ? ? -webkit-background-clip: text;

? ? ? ? ? // ? -webkit-text-fill-color: transparent;

? ? ? ? ? margin-right: 10px;

? ? ? ? }

? ? ? ? .dateTime {

? ? ? ? ? display: flex;

? ? ? ? ? flex-direction: column;

? ? ? ? ? justify-content: center;

? ? ? ? ? align-items: flex-end;

? ? ? ? ? div {

? ? ? ? ? ? font-size: 12px;

? ? ? ? ? ? font-family: PingFang SC-Regular, PingFang SC;

? ? ? ? ? ? font-weight: 400;

? ? ? ? ? ? color: #ffffff;

? ? ? ? ? ? line-height: 18px;

? ? ? ? ? ? // -webkit-background-clip: text;

? ? ? ? ? }

? ? ? ? }

? ? ? }

? ? ? .pm {

? ? ? ? width: 100px;

? ? ? ? height: 20px;

? ? ? ? font-size: 18px;

? ? ? ? font-family: Source Han Sans SC-Regular, Source Han Sans SC;

? ? ? ? font-weight: 400;

? ? ? ? color: #ffffff;

? ? ? ? line-height: 20px;

? ? ? ? text-align: center;

? ? ? ? border-left: 2px solid #b0b4bd;

? ? ? ? border-right: 2px solid #b0b4bd;

? ? ? }

? ? ? .shidu {

? ? ? ? width: 125px;

? ? ? ? height: 20px;

? ? ? ? font-size: 18px;

? ? ? ? font-family: Source Han Sans SC-Regular, Source Han Sans SC;

? ? ? ? font-weight: 400;

? ? ? ? color: #ffffff;

? ? ? ? line-height: 20px;

? ? ? ? border-right: 2px solid #b0b4bd;

? ? ? }

? ? ? .tem {

? ? ? ? img {

? ? ? ? ? width: 28px;

? ? ? ? ? height: 28px;

? ? ? ? ? vertical-align: middle;

? ? ? ? }

? ? ? ? font-size: 18px;

? ? ? ? font-family: Source Han Sans SC-Regular, Source Han Sans SC;

? ? ? ? font-weight: 400;

? ? ? ? color: #ffc21a;

? ? ? }

? ? }

? }

}

</style>