组件:时钟

本文介绍了一个使用Vue.js实现的实时日期时间显示组件,通过定时更新DOM元素来展示当前的日期和时间,包括小时、分钟、秒及星期。组件还包含了一个零填充函数,用于保持时间格式的一致性。

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

效果

在这里插入图片描述

代码

<template>
  <div class="this">
      {{ date }} {{ time }}
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      time: "",
      date: "",
      week: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    };
  },
  methods: {
    updateTime() {
      var cd = new Date();
      this.time =
        this.zeroPadding(cd.getHours(), 2) +
        ":" +
        this.zeroPadding(cd.getMinutes(), 2) +
        ":" +
        this.zeroPadding(cd.getSeconds(), 2);
      this.date =
        this.zeroPadding(cd.getFullYear(), 4) +
        "-" +
        this.zeroPadding(cd.getMonth() + 1, 2) +
        "-" +
        this.zeroPadding(cd.getDate(), 2) +
        " " +
        this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      var zero = "";
      for (var i = 0; i < digit; i++) {
        zero += "0";
      }
      return (zero + num).slice(-digit);
    }
  },
  mounted() {
    // var timerID = setInterval(this.updateTime, 1000);
    setInterval(this.updateTime, 1000);
    // this.updateTime();
  }
};
</script>
<style lang="less" scoped>
@import url("./clock.less");
</style>

html,
body {
    height: 100%;
}
body {
    background: #0f3854;
    background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
    background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
    background-size: 100%;
}
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #daf6ff;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
    letter-spacing: 0.05em;
    font-size: 80px;
    padding: 5px 0;
}
#clock .date {
    letter-spacing: 0.1em;
    font-size: 24px;
}
#clock .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值