vue实现电子时钟效果

这篇文章主要为大家详细介绍了vue实现电子时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现电子时钟的具体代码，供大家参考，具体内容如下

html

<div class="dateBox">
      <div class="time">{{ time }}</div>
      <div class="date">{{ date }}</div>
</div>

css

.dateBox {
  background: #121747;
  background-image: url("~@/assets/images/时间.png");
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  top: 70px;
  right: 50px;
  width: 400px;
  height: 88px;
}

.date {
  font-size: 28px;
  color: #8ac9ff;
  margin-left: 15px;
}

.time {
  font-size: 48px;
  color: #ffffff;
}

背景图片素材

js

以vue为例

data() {
    return {
      date: null,
      time: null,
    };
  },

mounted() {
    const clock = setInterval(() => {
      this.date = getToday().date;
      this.time = getToday().time;
    }, 1000);
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      clearInterval(clock);
    });
  },

// 日期时间格式化——获取当前日期时间，格式化为 2021/08/30 和 15:35:06
function getToday() {
  var datas = new Date();
  var on1 = "/";
  var on2 = ":";
  var onY = datas.getFullYear(); //年
  var onM = datas.getMonth() + 1; //月
  var onD = datas.getDate(); //日
  var onS = datas.getHours(); //时
  var onF = datas.getMinutes(); //分
  var onN = datas.getSeconds(); //秒

  if (onM >= 1 && onM <= 9) {
    //月
    onM = "0" + onM;
  }
  if (onD >= 1 && onD <= 9) {
    //日
    onD = "0" + onD;
  }
  if (onS >= 0 && onS <= 9) {
    //时
    onS = "0" + onS;
  }
  if (onF >= 0 && onF <= 9) {
    //分
    onF = "0" + onF;
  }
  if (onN >= 0 && onN <= 9) {
    //秒
    onN = "0" + onN;
  }

  return {
    date: onY + on1 + onM + on1 + onD,
    time: onS + on2 + onF + on2 + onN,
  };
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue2实现简易时钟效果
• Vue编写炫酷的时钟插件
• Vue实现数字时钟效果
• vue 实现LED数字时钟效果（开箱即用）
• vue简单练习 桌面时钟的实现代码实例
• vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
• 基于vue2的canvas时钟倒计时组件步骤解析
• vue.js实现带日期星期的数字时钟功能示例
• 用Vue.js开发网页时钟