微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)
直接上图:
拼团列表、拼团详情-倒计时

//单个倒计时,适用用于单个商品的倒计时
js文件:
//倒计时
function countDown(that) {
var endTime = new Date(that.data.end_time.replace(/-/g, '/')).getTime();
var nowTime = new Date().getTime();
var total_second = endTime - nowTime;
that.setData({
clock: dateformat(total_second)
});
if (total_second <= ) {
that.setData({
clock: "已结束"
});
}
setTimeout(function () {
countDown(that);
}, )
}
// 时间格式化输出,如11:03 25:19 每1s都会调用一次
function dateformat(micro_second) {
// 总秒数
var second = Math.floor(micro_second / );
// 天数
var day = Math.floor(second / / );
// 小时
var hr = Math.floor(second / % );
var hrStr = hr.toString();
if (hrStr.length == ) hrStr = '' + hrStr; // 分钟
var min = Math.floor(second / % );
var minStr = min.toString();
if (minStr.length == ) minStr = '' + minStr; // 秒
var sec = Math.floor(second % );
var secStr = sec.toString();
if (secStr.length == ) secStr = '' + secStr; if (day <= ) {
return "剩 " + hrStr + ":" + minStr + ":" + secStr;
} else {
return "剩 " + day + " 天 " + hrStr + ":" + minStr + ":" + secStr;
}
}
var app=getApp() Page({ /**
* 页面的初始数据
*/
data: {
vieComplete: false,
spellDetail:{},
end_time: '',
clock: '',
servicePhone: ''//咨询电话
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this wx.request({
url: app.apiRoutes.getGroupBuyDetail,
header: app.apiHeader,
data:{
id:options.id
},
success: function (res) {
var data=res.data.data
var lack_num = data.create_num - data.current_num
data.lack_num = lack_num
var description = data.goods.description == null ? '' : data.goods.description;
WxParse.wxParse('description', 'html', description, that, );
that.setData({
spellDetail:data,
end_time: data.end_time
}) //倒计时
countDown(that);
}
}) })
//适用于商品列表倒计时/** * end_time int 结束时间 * param int 数组键 */
js文件:
//倒计时
function grouponcountdown(that, end_time, param) {
var EndTime = new Date(end_time).getTime();
var NowTime = new Date().getTime(); var total_micro_second = EndTime - NowTime; var groupons = that.data.groupon;
groupons[param].endtime = dateformat(total_micro_second);
if (total_micro_second <= ) {
groupons[param].endtime = "已结束"
}
that.setData({
groupon: groupons
})
setTimeout(function () {
grouponcountdown(that, end_time, param);
}, )
} // 时间格式化输出,每1s都会调用一次
function dateformat(micro_second) {
// 总秒数
var second = Math.floor(micro_second / );
// 天数
var day = Math.floor(second / / );
// 小时
var hr = Math.floor(second / % );
var hrStr = hr.toString();
if (hrStr.length == ) hrStr = '' + hrStr; // 分钟
var min = Math.floor(second / % );
var minStr = min.toString();
if (minStr.length == ) minStr = '' + minStr; // 秒
var sec = Math.floor(second % );
var secStr = sec.toString();
if (secStr.length == ) secStr = '' + secStr; if (day <= ) {
return "剩 " + hrStr + ":" + minStr + ":" + secStr;
} else {
return "剩 " + day + " 天 " + hrStr + ":" + minStr + ":" + secStr;
}
} var app=getApp()
Page({ /**
* 页面的初始数据
*/
data: {
groupon:[]
},
//拼团详情
toSpellingDetail:function(e){
wx.navigateTo({
url: '/pages/spelling/spellingDetail?id='+e.currentTarget.id,
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
app.showLoading();
var that = this wx.request({
url: app.apiRoutes.getGroupBuyList,
header: app.apiHeader,
success:function(res){
var grouponList=res.data.data
for (var i = ; i < grouponList.length; i++) {
var lack_num = grouponList[i].create_num - grouponList[i].current_num
grouponList[i].lack_num = lack_num
} that.setData({
groupon: grouponList
})
var data = that.data.groupon
//列表获取到数据进行遍历
for (var i = ; i < data.length; i++) {
var end_time = data[i].end_time.replace(/-/g, '/')
grouponcountdown(that,end_time, i)
}
app.hideLoading();
},
fail:function(){
app.hideLoading();
}
})
},
本文参考于:https://blog.csdn.net/con_knife/article/details/79506327
微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)的更多相关文章
- 微信小程序 项目实战(三)list 列表页 及 item 详情页
1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...
- 微信小程序实现按首字母检索城市列表
不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边 ...
- 微信小程序- 提示不在以下合法域名列表中
第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...
- 微信小程序(12)--倒计时
记录一个常见的效果,倒计时. <text>倒计时:{{content}}</text> Page({ /** * 页面的初始数据 */ data: { endTime: '', ...
- 微信小程序发送手机验证码---倒计时
var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- Odoo 开源微信小程序商城模块
详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...
随机推荐
- lds 文件说明
主要符号说明 OUTPUT_FORMAT(bfdname) 指定输出可执行文件格式. OUTPUT_ARCH(bfdname) 指定输出可执行文件所运行 CPU 平台 ENTRY(symbol) 指定 ...
- c_ 数据结构_图_邻接矩阵
程序主要实现了图的深度遍历和广度遍历. #include <stdio.h> #include <stdlib.h> #include <string.h> #de ...
- BCZM : 1.8
问题: 所有的员工均在1楼进电梯的时候,选择所要到达的楼层.然后计算出停靠的楼层i,当到达楼层i的时候,电梯停止.所有人走出电梯,步行到所在的楼层中.求所有人爬的楼层数目和的最小值. 解法一 ...
- CF930E Coins Exhibition
题意:平面上一共有k个硬币(k<=1e9),给你n个区间这些区间中至少有一个硬币反面朝上,m个区间中至少有一个硬币正面朝上.问有多少种硬币放置方案?n,m<=100005. 标程: #in ...
- 【JZOJ1667】【BZOJ1801】【luoguP2051】中国象棋
description 在N行M列的棋盘上,放若干个炮可以是0个,使得没有任何一个炮可以攻击另一个炮.请问有多少种放置方法?中国象棋中炮的行走方式大家应该很清楚吧. analysis \(DP\),容 ...
- CSS3——动画
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 语法格式: animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反 ...
- CSS——溢出文字隐藏
溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. 主要处理英文单词 w ...
- 「题解」:$Game$
问题 B: $Game$ 时间限制: 1 Sec 内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...
- springboot启动报 A child container failed during start 错误解决过程
启动结果如下: "C:\Program Files\Java\jdk1.8.0_201\bin\java.exe" -agentlib:jdwp=transport=dt_sock ...
- ECMAScript 2016,2017 和 2018 中所有新功能的示例
很难追踪 JavaScript(ECMAScript)中的新功能. 想找到有用的代码示例更加困难. 因此,在本文中,我将介绍 TC39 已完成 ES2016,ES2017 和 ES2018(最终草案) ...