1、一般我们说的显示秒杀都是指的单条数据,循环我没做。

效果:

2、wxml代码:

<p class="endtime_act">距报名截止还有:
<block wx:if="{{clock!='0天0小时0分钟0秒'}}">{{clock}}</block>
<block wx:if="{{clock=='0天0小时0分钟0秒'}}">已经截止</block>
</p>

3、.js文件代码:重点解释一下下面的WHY?因为我们从PHP后台拿到的时间数据,第一次在js运行是获取不到数据的,和web端的js不一样,具体原因应该是微信小程序不同于web网页;所以第一次获取的【total_micro_second】一定是负数,那么我们要干的就是正数显示正数,负数显示1;为什么呢???

因为:结果大于1000ms也就是1s的时间,经过格式化后显示为0天0小时0分钟1秒!=0天0小时0分钟0秒,而我们赋值的1ms经过格式化后显示为0天0小时0分钟0秒,所以这就是本质区别。

(上次代码有点问题,截止的时间会闪,这次修正之后已解决。)

// pages/xiangqing/xiangqing.js

function countdown(that) {
var EndTime = that.data.end_time || [];
var NowTime = new Date().getTime();
var total_micro_second = EndTime - NowTime || []; //单位毫秒
if (total_micro_second < 0) {
console.log('时间初始化小于0,活动已结束状态');
total_micro_second = 1; //单位毫秒 ------ WHY?
}
console.log('剩余时间:' + total_micro_second);
// 渲染倒计时时钟
that.setData({
clock: dateformat(total_micro_second) //若已结束,此处输出'0天0小时0分钟0秒'
});
if (total_micro_second <= 0) {
that.setData({
clock: "已经截止"
});
return;
}
setTimeout(function () {
total_micro_second -= 1000;
countdown(that);
}
, 1000)
} // 时间格式化输出,如11天03小时25分钟19秒 每1s都会调用一次
function dateformat(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 天数
var day = Math.floor(second/3600/24);
// 小时
var hr = Math.floor(second/3600%24);
// 分钟
var min = Math.floor(second/60%60);
// 秒
var sec = Math.floor(second%60);
return day + "天" + hr + "小时" + min + "分钟" + sec+"秒";
} Page({ /**
* 页面的初始数据
*/
data: {
id:'',
result:[],
end_time:'',
clock:''
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//不含富文本html
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
common: res.data, //一维数组,全部数据
end_time: res.data.end_time //项目截止时间,时间戳,单位毫秒
})
console.log(that.data.common);
console.log('结束时间:' + that.data.end_time);
},
fail: function (res) { },
complete: function (res) { },
}),
//调用上面定义的递归函数,一秒一刷新时间
countdown(that);
},


4、拿去用吧,不懂的下面留言。

微信小程序+PHP:动态显示项目倒计时(格式:4天7小时58分钟39秒)的更多相关文章

  1. 微信小程序,时间戳和日期格式互相转化

    微信小程序,时间戳转为日期格式 通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils ...

  2. 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!

    微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...

  3. 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  4. 微信小程序,时间戳转为日期格式

    //数据转化 function formatNumber(n) { n = n.toString() ] ? n : ' + n } /** * 时间戳转化为年 月 日 时 分 秒 * number: ...

  5. 微信小程序豆瓣电影项目的改造过程经验分享

    在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...

  6. 详解微信小程序开发(项目从零开始)

    一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...

  7. 微信小程序“信用卡还款”项目实践

    小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...

  8. 记录微信小程序里自带 时间格式 工具

    微信小程序里面自己给了一个时间工具,是用来记录log日志,感觉可以记录下来,所以拿来自己用,以此记录: 直接传入 日期对象 进入 formatTime //得到下面格式的时间格式2017/07/22 ...

  9. 微信小程序之给项目设置id后提示不在合法域名列别中

    hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn, 就可以请求网址如请求小程序联盟的例 ...

随机推荐

  1. 更改Mantis的logo

    1 准备好自己的logo,例如准备的logo为zhaoxiyu.gif.zxy.gif 2 把上面的两个logo存放到C:/mantis-1.0.0a3/images 3 打开C:/mantis-1. ...

  2. android之使用mvn构建创造项目步骤

    转自:http://blog.csdn.net/luhuajcdd/article/details/8132386 手动的创建自己的android application   1.用android t ...

  3. 【BZOJ】【1091】【SCOI2003】切割多边形

    计算几何+枚举 我比较傻逼……一开始想了个贪心,就是这样:

  4. @JVM新一代的垃圾回收算法

    垃圾回收的瓶颈 传统分代垃圾回收方式,已经在一定程度上把垃圾回收给应用带来的负担降到了最小,把应用的吞吐量推到了一个极限.但是他无法解决的一个问题,就是Full GC所带来的应用暂停.在一些对实时性要 ...

  5. 第七章 JVM性能监控与故障处理工具(1)

    1.定位系统问题 依据 GC日志 堆转储快照(heapdump/hprof文件) 线程快照(threaddump/javacore文件) 运行日志 异常堆栈 分析依据的工具 jps:显示指定系统内的所 ...

  6. struts2 18拦截器详解(五)

    I18nInterceptor 该拦截器处理defaultStack第四的位置,是用来方便国际化的,如果说我们的一个Web项目要支持国际化的话,通常的做法是给定一个下拉框列出所支持的语言,当用户选择了 ...

  7. OA系统权限管理设计方案

    (转)OA系统权限管理设计方案 OA系统权限管理设计方案     不同职责的人员,对于系统操作的权限应该是不同的.优秀的业务系统,这是最基本的功能.     可以对“组”进行权限分配.对于一个大企业的 ...

  8. 校验IPv4和IPv6地址和URL地址

    1.校验IPV4地址: function validateIp(obj) { var ip=$(obj).val(); var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;// ...

  9. T-SQL with as 的用法(转) SQL 下的递归查询 SQL2005(CTE) ,SQL2000(Function 递归)

    摘自: http://blog.csdn.net/bluefoxev/article/details/6779794 ------- SQL2005 方法 一.WITH AS的含义     WITH ...

  10. Golang 中使用多维 map

    http://tnt.wicast.tk/2015/11/02/golang-multiple-dimension-map/ Golang 的 XML/JSON 解析库乍看使用起来很方便,只要构造一样 ...