uniapp u-view 两个时间戳的差 倒计时

**UniApp U-View倒计时**

在 UniApp 中，使用 U-View 库可以轻松实现各种复杂的 UI 组件。其中一个常见需求是显示两个时间戳之间的差值作为倒计时效果。在本文中，我们将一步步地讲解如何实现这个功能。

### 一、准备工作首先，我们需要在项目中安装 U-View 库。如果你还没有安装，可以通过以下命令进行安装：

bashnpm install uview-ui

接下来，需要在 `pages.json` 文件中注册 U-View 组件：

json{
 "pages": [
 {
 "path": "/",
 "component": "./index"
 }
 ]
}

### 二、创建计时器组件我们将创建一个名为 `countdown` 的组件，用于显示两个时间戳之间的差值。

首先，在 `components/countdown.vue` 文件中编写以下代码：

vue<template>
 <div class="countdown">
 <text :value="'倒计时:' + time" />
 </div>
</template>

<script>
export default {
 props: ['start', 'end'],
 data() {
 return {
 time: ''
 }
 },
 mounted() {
 this.countDown()
 },
 methods: {
 countDown() {
 const startTime = new Date(this.start).getTime()
 const endTime = new Date(this.end).getTime()
 const nowTime = new Date().getTime()

 if (nowTime >= endTime) return let time = Math.floor((endTime - nowTime) /1000)
 this.time = this.formatTime(time)

 setTimeout(() => {
 this.countDown()
 },1000)
 },
 formatTime(time) {
 const h = Math.floor(time /3600)
 const m = Math.floor((time %3600) /60)
 const s = time %60 return `${h}小时${m}分${s}秒`
 }
 }
}
</script>

<style scoped>
.countdown {
 text-align: center;
}
</style>

在上述代码中，我们定义了一个 `countDown` 方法，该方法计算两个时间戳之间的差值，并格式化为小时、分钟和秒的形式。我们还使用 `setTimeout` 函数每隔一秒更新一次计时器。

### 三、使用计时器组件现在，我们可以在主页面中使用这个计时器组件。

在 `index.vue` 文件中编写以下代码：

vue<template>
 <div class="page">
 <countdown :start="'2023-03-0100:00:00'" :end="'2023-04-0100:00:00'" />
 </div>
</template>

<script>
import countdown from '../../components/countdown.vue'

export default {
 components: { countdown }
}
</script>

<style scoped>
.page {
 text-align: center;
}
</style>

在上述代码中，我们使用 `countdown` 组件，并传入两个时间戳作为属性。

### 四、总结通过本文的步骤，我们成功地实现了一个 UniApp U-View 的倒计时效果。这个例子展示了如何使用 U-View 库创建复杂的 UI 组件，并且可以轻松地在项目中应用。