微信小程序动态显示项目倒计时效果

效果:

微信小程序动态显示项目倒计时效果

wxml代码:

    

<view class='spellNum'>
<view>
<text style='color: #fff;'>团长</text>
<image src='{{shift}}'></image>
</view>
<image wx:for="{{head}}" src='{{item.buyer_avatar}}'></image>
<view wx:if="{{num==1}}" style='text-align:center'>
<text style='font-size:30rpx;color:#000;line-height:66rpx'>仅剩<text style='color:red'> {{surplus}} </text>个名额 \n</text>
<view>拼团
<text style='color:red'> {{clock}} {{micro_second}}</text> 后结束</view>
</view>
</view>

js文件代码:

// pages/spell/spell.js
let app = getApp()
Page({ /**
* 页面的初始数据
*/
data: {
clock: '',
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this// 参团人数
wx.request({
url: app.baseURL + "act=goods&op=group_info",
data: {
appid: app.appid,
groupbuy_id: options.groupbuy_id,
goods_id: options.goods_id
},
header: {
"content-type": "application/json"
},
success: res => {
console.log(res);
let date = res.data.datas.end_time
console.log('date'+date)
let thisDate = Math.round(new Date() / ) console.log('thisDate'+thisDate)
total_micro_second = date - thisDate
console.log('total_micro_second'+total_micro_second) count_down(that); }) // 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
var total_micro_second = ""; console.log(total_micro_second); /* 毫秒级倒计时 */
function count_down(that) {
// 渲染倒计时时钟
that.setData({
num: "",
clock: dateformat(total_micro_second)
}); if (total_micro_second <= ) {
that.setData({
num: "",
clock: "已经截止"
});
// timeout则跳出递归
return;
}
setTimeout(function () {
// 放在最后--
total_micro_second -= ;
count_down(that);
}
, )
} // 时间格式化输出,如03:25:19 86。每10ms都会调用一次
// function dateformat(micro_second) {
// // 秒数
// var second = Math.floor(micro_second / 1000);
// // 小时位
// var hr = fill_zero_prefix(Math.floor(second / 3600));
// // 分钟位
// var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
// // 秒位
// var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
// // 毫秒位,保留2位
// //var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10)); // return hr + ":" + min + ":" + sec;
// } function dateformat(micro_second) { // 总秒数
//var second = Math.floor(micro_second / 1000);
var second = micro_second ;
// 天数
var day = Math.floor(second / / );
// 小时
var hr = Math.floor(second / % );
// 分钟
var min = Math.floor(second / % );
// 秒
var sec = Math.floor(second % );
return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
} // 位数不足补零
function fill_zero_prefix(num) {
return num < ? "" + num : num
}
上一篇:IOS UITableViewUITableView小技巧--实现cell向左滑动删除,编辑等功能


下一篇:mysql查询语句中用户变量的使用