微信小程序动态显示项目倒计时的效果

这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时，格式如4天7小时58分钟39秒，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码，供大家参考，具体内容如下

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

效果：

2、wxml代码：

 p 
 block wx:if= {{total_micro_second =0}} 剩余时间：已经截止 /block 
 block wx:if= {{clock!= #39;已经截止 #39;}} 剩余时间：{{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( #39;剩余时间： #39; + 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: #39; #39;,
 result:[],
 end_time: #39; #39;,
 clock: #39; #39;
 },/**
 * 生命周期函数--监听页面加载
 onLoad: function (options) {
 var that = this;
 wx.request({
 url: #39;https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id= #39;+options.id,//不含富文本html
 data: {},
 method: #39;GET #39;, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 header: {
 #39;Content-Type #39;: #39;application/json #39;
 success: function (res) {
 that.setData({
 common: res.data, //一维数组，全部数据
 end_time: res.data.end_time //项目截止时间，时间戳，单位毫秒
 console.log(that.data.common);
 console.log( #39;结束时间： #39; + that.data.end_time);
 fail: function (res) { },
 complete: function (res) { },
 }), 
//调用上面定义的递归函数，一秒一刷新时间
 countdown(that);
},

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序 setData的使用方法

微信小程序日期时间选择器的使用方法

微信小程序联网请求的轮播图

以上就是微信小程序动态显示项目倒计时的效果的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！