直接上图:

拼团列表、拼团详情-倒计时

                                  

//单个倒计时,适用用于单个商品的倒计时

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

 

微信小程序 拼团商品倒计时(拼团列表、拼团商品详情)的更多相关文章

  1. 微信小程序 项目实战(三)list 列表页 及 item 详情页

    1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...

  2. 微信小程序实现按首字母检索城市列表

    不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边 ...

  3. 微信小程序- 提示不在以下合法域名列表中

    第一次开发微信小程序时在访问后台数据时总是提示 提示上面问题主要有两个原因: 1.为配置安全合法域名列表: 微信小程序在开发时需要在官网配置固定的数据来源网站: 登录小程序平台中->设置: 图中 ...

  4. 微信小程序(12)--倒计时

    记录一个常见的效果,倒计时. <text>倒计时:{{content}}</text> Page({ /** * 页面的初始数据 */ data: { endTime: '', ...

  5. 微信小程序发送手机验证码---倒计时

    var currentTime = 59 //倒计时的事件(单位:s)var interval = null //倒计时函数 Page({ data: { time:59 //倒计时 }, onLoa ...

  6. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  9. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  10. Odoo 开源微信小程序商城模块

    详见:http://oejia.net/blog/2018/09/13/oejia_weshop_about.html oejia_weshop Odoo 微信小程序商城模块 oejia_weshop ...

随机推荐

  1. css3的选择器

    先来做一下准备工作 页面的效果: 看到上面的框框了吗?我们就是通过给这些框框添加背景色的方式,来让大家,了解css3的选择器的效果,下面正式开始: 关联选择器 E1~E2 选择 E1 后面的兄弟 E2 ...

  2. css3 动画属性

    transition Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性. Internet Explorer 10.Firefox.Opera 和 Chr ...

  3. lunix查询jdk安装路径

    在linux系统查找jdk的安装路径:whereis javawhich java (java执行路径)echo $JAVA_HOME echo $PATH在windows查找jdk的安装路径:set ...

  4. JS对象随机数 random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。 注意:返回一个大于或等于 0但小于1的符号为正的数值

    随机数 random() random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数. 语法: Math.random(); 注意:返回一个大于或等于 0 但小于 1 ...

  5. Java集合框架(List,Set,Map)

    单列集合基本框架 List接口特点:1. 它是一个元素存取有序的集合.例如,存元素的顺序是11.22.33.那么集合中,元素的存储就是按照11.22.33的顺序完成的). 2. 它是一个带有索引的集合 ...

  6. 帆软报表PC端实施报表心得体会

    1.报表制作完成后,预览时自动显示查询内容,在控件处设置: 2.求一列数据的最小值(除去0),并对最小值字体加粗标绿,需要对对应单元格设置条件属性,并插入公式:C6 = min(greparray(C ...

  7. Elasticsearch日志之删除索引

    1.查询索引 [root@ecs-- elasticsearch]# curl -XGET http://localhost:9200/* {,,},},},,,},},},,,},},},,,},} ...

  8. VC++中的CString、char、int类型转换

    1.如何将CString类型的变量赋给char*类型的变量   方法一:GetBuffer函数  使用CString::GetBuffer函数.  char *p;  CString str=&quo ...

  9. (转)[视频压制/转换技术] I帧 B帧 P帧 IDR帧 等帧用途详细说明

    转:http://www.u2game.net/bbs/thread-46116-1-1.html 在视频压制.转换中,经常会看到:I帧 B帧 P帧 IDR帧 等名词,这里就是通用的解释一下这些帧的用 ...

  10. 《DSP using MATLAB》Problem 8.34

    今天下了小雨,空气中泛起潮湿的味道,阴冷的感觉袭来,心情受到小小影响. 代码: hp2lpfre子函数 function [wpLP, wsLP, alpha] = hp2lpfre(wphp, ws ...