本文主要是介绍uni-app：实现时钟自走（动态时钟效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果
核心代码
- 使用钩子函数 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}`;
}
完整代码
<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>
这篇关于uni-app：实现时钟自走（动态时钟效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
