页面上实时展示当前时分秒及日期周几（如：09:00:00 2022/07/08 星期五）

最新推荐文章于 2025-04-21 20:36:47 发布

几度风雨见丹心

最新推荐文章于 2025-04-21 20:36:47 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5和CSS JS Vue 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/mmwanwen/article/details/129242711

JS 同时被 3 个专栏收录

16 篇文章

订阅专栏

Vue

6 篇文章

订阅专栏

HTML5和CSS

4 篇文章

订阅专栏

该代码示例展示了如何在Vue.js应用中创建一个实时更新的时钟组件，时间格式为小时:分钟:秒年/月/日星期。组件使用定时器每秒更新当前时间和日期，并将结果显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求页面如图所示业务需求如图，在“可视化看板”下方有一个实时展示的时间，格式为“09:00:00 2022/07/08 星期五”

以下为代码实现过程

<template>
	<div class="fulldiv_title">
	  <div class="current_time">
	    <span class="nowTime">{{ nowTime }}</span>
	    <span class="currntDay">{{ currntDay }}</span>
	  </div>
	</div>
</template>

<script>
export default {
  data() {
    return {
			// 计时器
			timer: null,
			//   当前时间
			nowTime: "09:00:00",
			// 当前日期与星期几
			currntDay: "2022/01/02 星期五"
		}
	},
	created() {
		//设置一个定时器，每秒调用一次函数
	    this.timer = window.setInterval
	      (() => {
	        this.getNowTime();
	      },
	      1000);
  },
  destroyed() {
  	//清除定时器
    clearInterval(this.timer); 
    this.timer = null;
  },
   methods: {
		getNowTime() {
	      let time = new Date();
	      let times = time.toLocaleString("en-US", { hour12: false }).split(" ");
	      let hourTime = times[1];
	      let mdy = times[0];
	      mdy = mdy.split("/");
	      let month = parseInt(mdy[0]);
	      let day = parseInt(mdy[1]);
	      let year = parseInt(mdy[2]);
	      let weekList = ["日", "一", , "二", "三", "四", "五", "六"];
	      let week = time.getDay();
	      let nowWeek = weekList[week];
	      this.nowTime = hourTime;
	      this.currntDay = year + "/" + month + "/" + day + " " + "星期" + nowWeek;
	    }
	}
}
</script>

<style lang="scss" scoped>
  .fulldiv_title {
    width: 100%;
    height: 13.1%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(/visualization/title.png);
    position: relative;
    .current_time {
      position: absolute;
      bottom: 0;
      //水平居中
      left: 50%;
      transform: translate(-50%, -30%);
      .nowTime {
        font-size: 25px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #ffffff;
        line-height: 19px;
        opacity: 0.64;
        margin-right: 20px;
      }
      .currntDay {
        font-size: 15px;
        font-family: Microsoft YaHei;
        color: #ffffff;
        line-height: 19px;
        opacity: 0.64;
      }
    }
  }
 </style>