效果
核心代码
- 使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果
mounted() {
this.updateTime(); // 初始化时间
setInterval(this.updateTime, 1000); // 每秒更新时间
},
- 自定义方法updateTime去获取当前时间,并设置数据
updateTime() {
const date = new Date();
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
this.currentTime = `${hours}:${minutes}:${seconds}`;
}文章来源:https://www.toymoban.com/news/detail-721294.html
完整代码
<template>
<view class="time-container">
<view>{{ currentTime }}</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTime: '' // 当前时间
};
},
mounted() {
this.updateTime(); // 初始化时间
setInterval(this.updateTime, 1000); // 每秒更新时间
},
methods: {
updateTime() {
const date = new Date();
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
this.currentTime = `${hours}:${minutes}:${seconds}`;
}
}
};
</script>
<style>
.time-container {
text-align: center;
font-size: 24px;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-721294.html
到了这里,关于uni-app:实现时钟自走(动态时钟效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!