4、定时查询当前年月日-时分秒

96 阅读1分钟

(1)例子1-原生方法-定时查询

image-20230609163917503.png

<template>
  <div class="now-time" :style="calStyle">
    <div class="now-time-time">{{ nowTime }}</div>
    <div class="now-time-date">
      <div>{{ nowWeek }}</div>
      <div>{{ nowDate }}</div>
    </div>
  </div>
</template>

<script>
import dataset from "./index";
export default {
  name: dataset.element,
  mixin: [],
  components: {
  },
  props: {
    datasetdata: {
      type: Object,
    },
    wallData: {
      type: Object,
    },
  },
  data() {
    return {
      width: this.datasetdata.width,
      height: this.datasetdata.height,
      //当前日期
      nowDate: "1970-01-01",
      //当前时间
      nowTime: "00:00:00",
      //当前星期
      nowWeek: "星期日",
    };
  },
  computed: {
    calStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px",
      };
    },
  },
  mounted() {
    this.getDate();
    setInterval(() => {
      this.getDate();
    }, 1000);
  },
  methods: {
    onResize(w, h) {
      this.width = w;
      this.height = h;
    },
    //获取当前时间
    getDate() {
      let newDate = new Date();
      let years = newDate.getFullYear();
      let months =
        newDate.getMonth() + 1 >= 10
          ? newDate.getMonth() + 1
          : "0" + (newDate.getMonth() + 1);
      let dates =
        newDate.getDate() >= 10 ? newDate.getDate() : "0" + newDate.getDate();
      let hours =
        newDate.getHours() >= 10
          ? newDate.getHours()
          : "0" + newDate.getHours();
      let minutes =
        newDate.getMinutes() >= 10
          ? newDate.getMinutes()
          : "0" + newDate.getMinutes();
      let seconds =
        newDate.getSeconds() >= 10
          ? newDate.getSeconds()
          : "0" + newDate.getSeconds();
      let day = newDate.getDay(); //获取当前是星期几 周一返回1,周六返回6,周日返回0
      let arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.nowDate = years + "年" + months + "月" + dates + "日";
      this.nowTime = hours + ":" + minutes + ":" + seconds;
      this.nowWeek = arr[day];
    },
  },
};
</script>

<style scoped lang="less">
.dvm-doc-pudongAirport-now-time {
  text-align: left;
  width: 100%;
  height: 100%;
  &-time {
    display: inline-block;
    width: 110px;
    font-family: DINPro-Medium;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 10px #ffffff;
    vertical-align: middle;
  }
  &-date {
    margin-left: 8px;
    display: inline-block;
    font-family: AdobeHeitiStd-Regular;
    font-size: 8px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 15px;
    letter-spacing: 0px;
    color: #9fa5a4;
    opacity: 0.57;
    vertical-align: middle;
  }
}
</style>

(2)例子2、moment()方法-定时查询

<div class="header">
   <span class="header-time">{{currentTime}}</span>
</div>
mounted() {
//更新时间       
    this.getCurrentDate();
    this.timer = setInterval(() => {           
        this.getCurrentDate();
    }, 1000)
},
//时间显示
getCurrentDate() {               
    this.currentTime =  moment().format('YYYY-MM-DD HH:mm:ss') 
},