html
<view class="countdown">
<text>倒计时：</text>
<text wx:for="{{countdown}}" wx:key="index">{{item}}</text>
</view>ts
文章来源：https://www.toymoban.com/news/detail-857986.html
data: {
countdown: [], // 存放倒计时数组
targetTime: '', // 目标时间戳
intervalId: null, // 定时器ID
}
startCountdown () {
const that = this;
// 每秒更新一次倒计时
this.data.intervalId = setInterval(function () {
const now = new Date().getTime();
const diff = that.data.targetTime - now;
if (diff <= 0) {
// 倒计时结束，清除定时器
clearInterval(that.data.intervalId);
that.setData({
countdown: ['倒计时结束'],
});
} else {
// 计算剩余的天、时、分、秒
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
that.setData({
countdown: [days, '天', hours, '时', minutes, '分', seconds, '秒'],
});
}
}, 1000);
},
onLoad: function (options) {
this.setData({
targetTime: new Date('2024-04-28 16:53:10').getTime(),
});
this.startCountdown();
}
文章来源地址https://www.toymoban.com/news/detail-857986.html
到了这里，关于微信小程序展示倒计时的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
