jiangxiSZ/shuzhixiangzheng/src/components/Time.vue

<template>
    <div id="time">
        <!-- <img class="img" id="img1" src="../assets/png/title.png"></img> -->
        <div ref="time_time"  id="time_time">10:45:23</div>
        <div ref="time_week" id="time_week">星期五</div>
        <div ref="time_day" id="time_day">2021.05.16</div>
    </div>
  </template>
  
  <script>
    import {getDayTime,getWeek,getDayNumStr} from "../assets/api/time.js"
  export default {
    name: 'MainPage',
    data () {
      return {
        msg: '',
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.showTime()
      })
     
    },
    methods:{
      showTime(){
        
        setInterval(()=>{
          document.getElementById("time_time").innerText=getDayTime();
          document.getElementById("time_week").innerText=getWeek();
          document.getElementById("time_day").innerText=getDayNumStr();
      },500)
      },
    }
  }
  </script>
  
  
  <style scoped>
    #time{
        position: absolute;
            z-index: 130;
          
            /* width: 100%;
            height: 100%; */
    }
    #time_time{
              z-index: 113;
              color: azure;
              position: fixed;
              font-size: 40px;
              top: 1.5%;
              right: 10%;
          }
          #time_week{
              position: fixed;
              width: 100px;
              top: 2%;
              right: 4%;
              z-index: 111;
              color: azure;
              font-size: 12px;
          }
          #time_day{
              position: fixed;
              width: 100px;
              top: 4%;
              right: 4%;
              z-index: 111;
              color: azure;
              font-size: 12px;
          }
 
  </style>