页面添加实时更新的时间

每秒更新一次时间,即可

 // 日期实时更新
    this.addDate();
    setInterval(() => {
      this.addDate(); // 获取当前时间
    }, 1000);

  方法:

 //获取当前年月日
    addDate() {
      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.topDate = `${year}/${month}/${day}`;
      this.topWeek = ` ${weekArr[week]}`;
      this.topTime = `${hour}:${minute}:${second}`;
    },

  html:

 <div class="zw-timeandweather">
        <div class="zw-taw-time">
          <span>{{ topTime }}</span>
        </div>
        <div class="zw-taw-dateandweek">
          <div class="zw-taw-week">
            {{ topWeek }}
          </div>
          <div class="zw-taw-date">
            {{ topDate }}
          </div>
        </div>
      </div>

  效果

 

posted @ 2022-06-17 09:39  每天都是鑫的媛  阅读(168)  评论(0)    收藏  举报