微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时,格式如4天7小时58分钟39秒,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1、一般我们说的显示秒杀都是指的单条数据,循环我没做。
效果:
2、wxml代码:
- <p>
- <block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block>
- <block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
- </p>
3、.js文件代码:
- function countdown(that) {
- var EndTime = that.data.end_time || [];
- var NowTime = new Date().getTime();
- var total_micro_second = EndTime - NowTime || [];
- console.log('剩余时间:' + total_micro_second);
- // 渲染倒计时时钟
- that.setData({
- clock: dateformat(total_micro_second)
- });
- 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);
- },
来源: http://www.phperz.com/article/17/0903/338692.html