uniapp实时动态显示时间

👾序言

最近在做项目时，多个项目都有这个需求，动态显示实时时间，所以我就把它整理在这

🍕代码思路

原本我是想用监听器来实现这个动态变化，但是发现总的有东西来触发时间变变化，所以使用了定时器，每次过一秒就重新调用Date()来获取时间，然后在这个界面销毁时，清除定时器（必须清除，不然那定时器一直会存在消耗性能）

🦗代码

<template><view class="content"><image src="../../static/clock.png"></image><view class="time">{{date}}</view></view>
</template><script>export default {data() {return {title: 'Hello',date:'',setTime:''}},onLoad() {var setTime = setInterval( ()=> {let date = new Date()let year = date.getFullYear()let month = date.getMonth() + 1month >= 9 ? month :  month='0'+monthlet day = date.getDate()day >= 9 ? day : day = '0'+ daylet hour = date.getHours()hour >= 9 ? hour : hour = '0'+hour let minute = date.getMinutes()minute >= 9 ?  minute : minute = '0'+minutelet second = date.getSeconds()second >= 9 ? second : second = '0'+secondthis.date = year + '-'+month+'-'+day+"  "+hour+":"+minute+":"+second}, 1000)},onHide(){clearInterval(setTime)},methods: {}}
</script><style lang="scss">.content {height: 100vh;width: 100vw;display: flex;flex-direction: column;align-items: center;justify-content: center;image{height: 300rpx;width: 300rpx;}.time{font-size: 40rpx;font-weight: bold;font-family: 'Courier New', Courier, monospace;}}</style>

实现效果：

😊结尾

大佬们如果有可以不用定时器的方法请私信我或评论，大佬们点点关注，创作不易！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！