vue3实现时钟效果

疯狂的小强呀

已于 2024-04-11 15:28:58 修改

阅读量437

点赞数 2

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2024-04-11 15:28:16 首次发布

本文链接：https://blog.csdn.net/David_house/article/details/137640503

版权

vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

鼬鼬鼬鼬鼬被提需求了！！！
产品：你学什么的？
我：跟CV有点关系
产品：control C加control V是吧
我：对对对

效果

时间实时变化：
在这里插入图片描述

页面部分

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

ts部分

<script lang="ts" setup>
import { ref,  onMounted ,onUnmounted} from 'vue'

const time = ref(null)

onMounted(() => {
  const clock = setInterval(() => {
    time.value = getToday().time;
  }, 1000);

  // 使用onUnmounted清除定时器
  onUnmounted(() => {
    clearInterval(clock);
  });
})
// 时间格式化：获取当前时间，格式化为15:35:06
function getToday() {
  var datas = new Date();
  var on1 = " / ";
  var on2 = " : ";
  var onS = datas.getHours(); //时
  var onF = datas.getMinutes(); //分
  var onN = datas.getSeconds(); //秒
 
  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 {
    time: onS + on2 + onF + on2 + onN,
  };
}
</script>

样式

<style lang="less" scoped>
.dateBox {
  background: #121747;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  position: absolute;
  margin-left: 20%;
}
 
.time {
  font-size: 20px;
  color: #ffffff;
}
</style>