vue3 + ts设置1个半小时的倒计时
时间: 2023-10-18 17:23:52 浏览: 55
首先,你需要安装 Vue.js 3 和 TypeScript。然后,你可以创建一个组件来实现倒计时。以下是一个示例组件:
```typescript
<template>
<div>
<div>倒计时:{{formattedTime}}</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const timeLeft = ref(0);
// 设置倒计时时间为1个半小时,即90分钟
const countdownTime = 90 * 60;
// 更新时间
const updateTime = () => {
const now = Math.floor(Date.now() / 1000);
timeLeft.value = countdownTime - now;
};
// 格式化时间
const formattedTime = computed(() => {
const minutes = Math.floor(timeLeft.value / 60);
const seconds = timeLeft.value % 60;
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});
// 定时器,每秒更新一次时间
setInterval(updateTime, 1000);
return {
formattedTime,
};
},
};
</script>
```
这个组件会在页面上显示一个倒计时,从 90 分钟开始倒计时,每秒更新一次。你可以根据实际需求进行修改。