微信小程序+PHP:动态显示项目倒计时(格式:4天7小时58分钟39秒)
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秒)的更多相关文章
- 微信小程序,时间戳和日期格式互相转化
微信小程序,时间戳转为日期格式 通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils ...
- 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!
微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...
- 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)
自动发单,自动评价,自动评论,自动推广 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...
- 微信小程序,时间戳转为日期格式
//数据转化 function formatNumber(n) { n = n.toString() ] ? n : ' + n } /** * 时间戳转化为年 月 日 时 分 秒 * number: ...
- 微信小程序豆瓣电影项目的改造过程经验分享
在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...
- 详解微信小程序开发(项目从零开始)
一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...
- 微信小程序“信用卡还款”项目实践
小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...
- 记录微信小程序里自带 时间格式 工具
微信小程序里面自己给了一个时间工具,是用来记录log日志,感觉可以记录下来,所以拿来自己用,以此记录: 直接传入 日期对象 进入 formatTime //得到下面格式的时间格式2017/07/22 ...
- 微信小程序之给项目设置id后提示不在合法域名列别中
hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn, 就可以请求网址如请求小程序联盟的例 ...
随机推荐
- [runtime] MAObjCRuntime
MAObjCRuntime 源码地址:(引入头文件MARTNSObject.h即可,非arc环境下) http://pan.baidu.com/s/1eQ6776U https://github.co ...
- c++反汇编与逆向分析 小结
第一章 熟悉工作环境和相关工具 1.1 熟悉OllyDBG 操作技巧 1.2 反汇编静态分析工具 IDA(最专业的逆向工具) 快捷键 功能 Enter 跟进函数实现 ...
- PHP命名空间学习笔记
命名空间的支持版本:PHP 5 > 5.3.0,PHP 7 . 什么是命名空间 从广义上来说,命名空间是一种封装事物的方法.在很多地方都可以见到这种抽象概念.例如,在操作系统中目录用来将相关文件 ...
- 【BZOJ】【1089】【SCOI2003】严格n元树
高精度/递推 Orz Hzwer…… 然而我想多了…… 理解以后感觉黄学长的递推好精妙啊 顺便学到了一份高精度的板子= =233 引用下题解: f[i]=f[i-1]^n+1 ans=f[d]-f[d ...
- MySQL中的模糊查询和通配符转义
MySQL中实现模糊查询有2种方式:一是用LIKE/NOT LIKE,二是用REGEXP/NOT REGEXP(或RLIKE/NOT RLIKE,它们是同义词). 第一种是标准的SQL模式匹配.它有2 ...
- Objective-C:对象之间循环引用会造成死循环
对象之间的循环引用 两个对象A.B,有可能会出现一种特殊的情况:A中包含B的实例变量:B中又包含A的实例变量,如果两个实例变量都是强引用(A有B实例变量的所有权,B也有A的实例变量的所有 ...
- Javascript 操作 Sql中的Xml 字段
在一个项目当中,我们需要把数据库中的Xml字段中的信息表现在页面中,如果用Sql进行操作,读取.这样的话,必然导致太复杂,于是我想到了,如果把Xml字段先读出来,然后用Js去操作,这样岂不是简单了许多 ...
- 编写和执行C#代码的插件:CS-Script for Notepad++
这个插件可以方便得让您在Notepad++编辑器中编辑和执行C#代码(脚本).它具备通用的C#智能感知和项目任务管理功能,方式非常类似于MS Visual Studio.除了这一点,它提供了通用的调试 ...
- Java基础(十三):集合
一.Java 集合框架: 早在Java 2中之前,Java就提供了特设类.比如:Dictionary, Vector, Stack, 和Properties这些类用来存储和操作对象组.虽然这些类都非常 ...
- Redis自学笔记–Zset类型及管理简述
Zset类型 ...