相思资源网 Design By www.200059.com
本文实例为大家分享了微信小程序实现倒计时功能的具体代码，供大家参考，具体内容如下
商城商品中的活动倒计时
js
var endTime = new Date().getTime() + 24 * 3600 * 1000*4;
Page({
/**
* 页面的初始数据
*/
data: {
headerImgs: postData.postSwiperData,
countDownDay: '',
countDownHour: '',
countDownMinute: '',
countDownSecond: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var id = options.id; //页面跳转传过来的值
},
onReady: function() {
var that = this;
countdown(that);
}
})
function countdown(that) {
var NowTime = new Date().getTime();
var EndTime = endTime;
var total_micro_second = EndTime - NowTime || [];
console.log('当前时间'+NowTime+'\n剩余时间：' + total_micro_second);
// 渲染倒计时时钟
that.setData({
countDownDay: dateformaDay(total_micro_second),
countDownHour: dateformaHour(total_micro_second),
countDownMinute: dateformaMinute(total_micro_second),
countDownSecond: dateformaSecondMinute(total_micro_second),
});
// if (total_micro_second <= 0) {
// that.setData({
// clock: "已经截止"
// });
// //return;
// }
setTimeout(function() {
total_micro_second -= 1000;
countdown(that);
}, 1000)
}
// 时间格式化输出
function dateformaDay(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 天数
var day = Math.floor(second / 3600 / 24);
return day;
}
function dateformaHour(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 小时
var hr = Math.floor(second / 3600 % 24);
return hr;
}
function dateformaMinute(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 分钟
var min = Math.floor(second / 60 % 60);
return min;
}
function dateformaSecondMinute(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 秒
var sec = Math.floor(second % 60);
return sec;
}
wxml
<!-- 倒计时 start -->
<view style='display:flex;flex-direction:column;'>
<span style="font-size:10px;color:white;margin-top:5px;">距活动结束还剩</span>
<view class='time-container'>
<text class='time-number'>{{countDownDay}}</text>
<span class='time-text'>天</span>
<text class='time-number'>{{countDownHour}}</text>
<span class='time-text'>时</span>
<text class='time-number'>{{countDownMinute}}</text>
<span class='time-text '>分</span>
<text class='time-number '>{{countDownSecond}}</text>
<span class='time-text '>秒</span>
</view>
</view>
<!-- 倒计时 end -->
wxss
.time-container {
display: flex;
flex-direction: row;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
align-items: center;
}
.time-number {
background: white;
color: red;
width: 18px;
height: 18px;
font-size: 12px;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.time-text {
font-size: 10px;
color: white;
margin: 3px;
}
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
微信小程序,倒计时
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序实现倒计时功能的评论...