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

//单个倒计时,适用用于单个商品的倒计时
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 ...
随机推荐
- SpringBoot Redis 订阅发布
一 配置application.yml spring: redis: jedis: pool: max-active: 10 min-idle: 5 max-idle: 10 max-wait: 2 ...
- ArcGIS Server 10.x查询管理用户名和修改管理员密码
在x:\Program Files\ArcGIS\Server\tools\passwordreset下有个bat文件,用管理员用户运行它. PasswordReset -l PasswordRese ...
- JVM之类加载过程
# 类的生命周期 1. 加载 loading2. 验证 verification3. 准备 preparation4. 解析 resoluation5. 初始化 initialization6. 使用 ...
- Vim统计字符串出现次数
关键命令: :%s/pattern//gn 参数说明: % - 指明操作区间,%表示全文本:可以使用1,$或者行区间代替 s – substitute,表示替换 pattern - 要查找的字符串 / ...
- day19 装饰器
Python之路,Day7 = Python基础7 randomwrapper 包装材料:包装纸:书皮global a 全局的(也就是,函数最外面的那个)nonlocal a 局部的,上层的函数的变量 ...
- csv文件格式
弱渣今天第一次读Kaggle入门文章,知道train data,test data以及提供的result文件大都是以csv文件格式给出的. csv,全称 Comma-Separated Values, ...
- 尚学linux课程---7、linux系统管理命令
尚学linux课程---7.linux系统管理命令 一.总结 一句话总结: 查网络:netstat -ntpl 查进程:ps 1.需要下载163yum源(从外部源同步仓库)里面的所有rpm文件? re ...
- System.Web.UI.WebControls.FileUpload.cs
ylbtech-System.Web.UI.WebControls.FileUpload.cs 1. 程序集 System.Web, Version=4.0.0.0, Culture=neutral, ...
- 封装一个C#日志类Loger
public class Loger { /// <summary> /// 写入日志 /// </summary> /// <param name="cont ...
- Spark中使用Java编程的常用方法
原文引自:http://blog.sina.com.cn/s/blog_628cc2b70102w9up.html 一.初始化SparkContext System.setProperty(" ...