直接上图:

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

                                  

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

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. 查看Linux 内核版本命令

    1.Ubuntu 查看版本命令,三种方法. 1.使用  "uname -a" 2.使用  "lsb_release -a"   3.使用  "cat ...

  2. SSH的两种登录方式以及配置

    前言 SSH简介 Secure Shell(SSH) 是由 IETF(The Internet Engineering Task Force) 制定的建立在应用层基础上的安全网络协议.它是专为远程登录 ...

  3. 01->OpenGL 实验环境配置(glut)及简单实例

    --  简介  -- OpenGL是通过数学等理论知识定义3D或2D模型,由计算机通过流水线渲染技术进行渲染,产生逼真的场景图像,电影和游戏中的特效都有用到.每每看到精美的画面,真想自己也能做出如此作 ...

  4. K8S之WebApi部署

    转载声明 本文转自:ASP.NET Core on K8S学习初探(3)部署API到K8S 1.下载镜像 docker pull edisonsaonian/k8s-demo 因为是测试流程,直接把文 ...

  5. ResultSetMetaData中getColumnLabel和getColumnName的区别

    利用jdbc连接数据库查询时,通常返回的结果就是每行数据的键值对集合.这时我们需要知道查询出来的数据有哪些字段.根据ResultSet结果集得到的ResultSetMetaData就可以获取到每个字段 ...

  6. redis笔记_源码_跳表skiplist

    参照:https://juejin.im/post/57fa935b0e3dd90057c50fbc#comment http://redisbook.com/preview/skiplist/dat ...

  7. Let's Encryt免费SSL证书申请[我司方案]

    Let's Encrypt颁发的证书是目前生产的大多数浏览器都信任的,您只需下载并运行Let's Encrypt客户端来生成一个证书即可. 在颁发证书之前,需要验证您的域名的所有权.首先,在您的主机上 ...

  8. css样式初始化代码总结

    编写css样式之前需要初始化css样式,总结如下: /* CSS Document */ html, body, div, span, object, iframe,h1, h2, h3, h4, h ...

  9. spring整合Quartz框架过程,大家可以参考下

    这篇文章详细介绍了spring集成quartz框架流程,通过示例代码进行了详细说明,对学习或任务有参考学习价值,并可供需要的朋友参考. 1.quartz框架简介(m.0831jl.com) quart ...

  10. 廖雪峰Java16函数式编程-1Lambda表达式-3方法引用

    Java8引入了Lambda表达式,可以不必编写FunctionalInterface的实现类,直接写Lambda表达式.除了Lambda表达式,我们还可以直接传入方法引用 方法引用是指:如果某个方法 ...