快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)倒計時

更新時間：2022年05月22日 07:30:36 作者：掙扎的工程師

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)倒計時的具體代碼，供大家參考，具體內(nèi)容如下

大家好，今天我們來學(xué)習(xí)一下倒計時的實(shí)現(xiàn)，好好看，好好學(xué)，超詳細(xì)的。

直接上代碼吧

<view class="title-item">倒計時</view>
<view class="countdown-item">
? <view class="countdown-title">
? ? <block>
? ? ? <text class='tui-conutdown-box'>{{days}}</text>
? ? ? <text class="countdown-text">天</text>
? ? ? <text class='tui-conutdown-box'>{{hours}}</text>
? ? ? <text class="countdown-text">時</text>
? ? ? <text class='tui-conutdown-box'>{{minutes}}</text>
? ? ? <text class="countdown-text">分</text>
? ? ? <text class='tui-conutdown-box'>{{seconds}}</text>
? ? ? <text class="countdown-text">秒</text>
? ? </block>
? </view>
</view>

.countdown-item {
? width: 100%;
? height: 100rpx;
? border: 0rpx solid red;
}

.countdown-title {
? width: 100%;
? height: 50rpx;
? line-height: 50rpx;
? font-size: 40rpx;
? color: #fff;
}

.tui-conutdown-box {
? display: inline-block;
? line-height: 50rpx;
? text-align: center;
? background-color: red;
? color: #fff;
? margin: 0 4rpx;
? padding: 10rpx 20rpx;
}

.tui-countdown-bg {
? background-color: #DF0101;
}

.countdown-text{
? color: #000;
}

Page({
?? ?data: {
?? ??? ?nowDate: '2021-12-22 18:00:00', //結(jié)束時間
? ? ?? ?countdown: '', //倒計時
? ? ?? ?days: '00', //天
? ? ?? ?hours: '00', //時
? ? ?? ?minutes: '00', //分
? ? ?? ?seconds: '00', //秒
?? ?},
?? ?
?countTime() {
? ? let days,hours, minutes, seconds;
? ? let nowDate = this.data.nowDate;
? ? console.log(nowDate)
? ? let that = this;
? ? let now = new Date().getTime();
? ? let end = new Date(nowDate).getTime(); //設(shè)置截止時間
? ? // console.log("開始時間：" + now, "截止時間:" + end);
? ? let leftTime = end - now; //時間差 ? ? ? ? ? ? ? ? ? ? ? ??
? ? if (leftTime >= 0) {
? ? ? days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
? ? ? hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
? ? ? minutes = Math.floor(leftTime / 1000 / 60 % 60);
? ? ? seconds = Math.floor(leftTime / 1000 % 60);
? ? ? seconds = seconds < 10 ? "0" + seconds : seconds
? ? ? minutes = minutes < 10 ? "0" + minutes : minutes
? ? ? hours = hours < 10 ? "0" + hours : hours
? ? ? that.setData({
? ? ? ? countdown: days+":"+hours + "：" + minutes + "：" + seconds,
? ? ? ? days,
? ? ? ? hours,
? ? ? ? minutes,
? ? ? ? seconds
? ? ? })
? ? ? // console.log(that.data.countdown)
? ? ? //遞歸每秒調(diào)用countTime方法，顯示動態(tài)時間效果
? ? ? setTimeout(that.countTime, 1000);
? ? } else {
? ? ? that.setData({
? ? ? ? countdown: '已截止'
? ? ? })
? ? }
?},
?onLoad: function (options) {
? ? this.countTime();
?},
})

如圖所示：