前端代码当前时间设置

xiaoming_0208

已于 2023-05-25 11:32:27 修改

阅读量171

点赞数

文章标签：前端 javascript java

于 2023-05-25 11:29:53 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/130863731

版权

效果图

代码：

 <div class="time">
          <div>{{ newTime }}</div>
          <div class="div-2">{{ nowDate }}</div>
  </div>

data() {
    return {
      // 当前时间
      newTime: "",
      nowDate: "",
    };

 mounted() {
    this.currentTime();
  },

  methods: {
 //获取当前时间
    getDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      // let week = date.getDay(); // 星期
      // let weekArr = [
      //   "星期日",
      //   "星期一",
      //   "星期二",
      //   "星期三",
      //   "星期四",
      //   "星期五",
      //   "星期六",
      // ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.newTime = `${year}/${month}/${day}`;
      this.nowDate = `${hour}:${minute}:${second}`
    },

    //定时器调取当前时间
    currentTime() {
      setInterval(() => {
        this.getDate();
      }, 100);
    },
}

.time {
        width: 400px;
        height: calc(100% - 40px);
        margin-top: 15px;
        color: #fff;
        font-size: 14px;
        margin: auto 0;
        text-align: center;
        padding-top: 8px;
        line-height: 15px;
        background-image: url('../../assets/dazuan/top/time.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        // background-color: rgb(25, 115, 189);
        .div-2 {
          font-size: 16px;
          color: #85efff;
        }
      }