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. 算法:快速排序(Quick Sort)

    算法定义 目前学习是五种排序(冒泡.插入.选择.合并.快速)中,快速排序是最让我喜欢的算法(因为我想不到),其定义如下: 随机的从数组中选择一个元素,如:item. 对数组进行分区,将小于等于 ite ...

  2. 21.重入锁ReentrantLock

    ReentrantLock     重入锁,在需要进行代码同步部分上加锁,但是一定要记得解锁.     类型:公平锁(队列方式进行排队).非公平锁(按照cpu的分配),非公平锁性能要比公平锁性能高,默 ...

  3. Ubuntu 常用命令大全

    Ubuntu 常用命令大全查看软件 xxx 安装内容#dpkg -L xxx查找软件#apt-cache search 正则表达式查找文件属于哪个包#dpkg -S filename apt-file ...

  4. C语言中static的作用及C语言中使用静态函数有何好处

    转自:http://www.jb51.net/article/74830.htm 在C语言中,static的作用有三条:一是隐藏功能,二是保持持久性功能,三是默认初始化为0. 在C语言中,static ...

  5. 4 Sum leetcode java

    题目: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...

  6. Open edX 学习、开发、运维相关链接整理

    原文地址:http://edustack.org/ 所需知识: Linux Git Python (Django Mako coffeescript sass) (MongoDB Mysql) Ans ...

  7. 使用swipemenulistview实现列表的左右滑动

    今天从网上找到一个第三方控件swipemenulistview,封装好的一个控件,可以实现列表的左右滑动,模仿qq的列表效果 下载地址为:https://github.com/baoyongzhang ...

  8. Java Object Clone

    Java Object Clone User user = new User(); user.setName("tom"); User user1 = new User(); us ...

  9. Linux shell 脚本入门教程+实例

    原文:http://www.wiquan.com/article/136 为什么要进行shell编程 在Linux系统中,虽然有各种各样的图形化接口工具,但是shell仍然是一个非常灵活的工具.She ...

  10. XML基础以及用DOM4j读取数据

    都知道,HTML被设计用来显示数据,XML被设计用来保存.数据传输.而我们平时经经常使用的无非是保存数据.读取数据.所以这里主要介绍XML相关基础内容.以及用DOM4j来存取XML的数据. 以下简单介 ...