本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下 大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。 直接上代码吧 <view cl
本文实例为大家分享了微信小程序实现倒计时的具体代码,供大家参考,具体内容如下
大家好,今天我们来学习一下倒计时的实现,好好看,好好学,超详细的。
直接上代码吧
<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', //结束时间
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(); //设置截止时间
// 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)
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(that.countTime, 1000);
} else {
that.setData({
countdown: '已截止'
})
}
},
onLoad: function (options) {
this.countTime();
},
})
如图所示:
结语
关于微信小程序实现倒计时就介绍到这里 ,欢迎大家多多指教,互相交流,一起学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。
--结束END--
本文标题: 微信小程序实现倒计时
本文链接: https://www.lsjlt.com/news/149372.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0