微信小程序+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, 就可以请求网址如请求小程序联盟的例 ...
随机推荐
- NDK开发环境搭建_r8
本文主内容: 1. Android NDK 安装 2. 安装Cygwin与使用NDK编译 3. 在Eclipse中集成C/C++开发环境CDT 4. 安装Sequoyah插件 5. JNI编 ...
- 在VS 2010上搭建Windows Phone 7开发平台
如今Windows Phone 7平台越来越火了,刚刚拿到一款新的Windows Phone,于是准备在电脑上搭建WP7的开发环境. 首先,安装VS2010,升级到SP1,并安装Windows P ...
- javascript级联菜单,数据从数据库中获取
1.html代码: <%@ page contentType="text/html; charset=gb2312" %> <%@ page import=&qu ...
- iOS:UITableView表格视图控件
UITableView:表格视图控件,继承滚动视图控件UIScrollView,(类似于UIPickerView选择器,它主要通过设置数据源代理和行为代理实现协议来设置单元格) 对表格的操作主要 ...
- iOS开发-Get请求,Post请求,同步请求和异步请求
标题中的Get和Post是请求的两种方式,同步和异步属于实现的方法,Get方式有同步和异步两种方法,Post同理也有两种.稍微有点Web知识的,对Get和Post应该不会陌生,常说的请求处理响应,基本 ...
- 搭建个人博客-hexo+github
自己也算是摸爬滚打搭建成功,然后自己再重新安装部署一遍,把完整步骤分享给大家,同时最后有一些连接,如果我的步骤不行,大家可以参考其他人的(这个有点花费时间,大家提前有个心理准备 - _-) 一.第一步 ...
- IntPtr 转 string
假设有 intPtr pBuffer 方法一: 直接使用Marshal.PtrToStringAnsi方法: string ss = Marshal.PtrToStringAnsi(pBuffer); ...
- VB.NET与C# 语法区别展示
在学习VB.NET后发现,VB.NET与C#的语法主要的不同在两个部分,这两部分搞通了,那就游刃有余,迎刃而解了.现将其对比总结如下: 一.实体部分 (与VB相比,在C#和VB.NET中,实体的使用很 ...
- windows server 2008 远程桌面(授权、普通用户登录)~ .
大家好,因公司上ERP系统,用户端需要远程到服务器,但大家都知道微软默认只有2个,所以没有办法达到我公司的要求. 在网上找了很久也没有找到合适的文章,要不就这里说一点,那里说一点,没有一个全的,还有很 ...
- Oracle基础重点概要
表空间 逻辑上处于数据库之下,利用表空间可以更灵活地规划数据库结构. 创 ...