微信小程序动态显示项目倒计时效果
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时,格式如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../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' }, suess: function (res) { that.setData({ mon: res.data, //一维数组,全部数据 end_time: res.data.end_time //项目截止时间,时间戳,单位毫秒 }) console.log(that.data.mon); console.log('结束时间' + that.data.end_time); }, fail: function (res) { }, plete: function (res) { }, }), //调用上面定义的递归函数,一秒一刷新时间 countdown(that); },
为大家推荐现在关注度比较高的微信小程序教程一篇长沙网络推广为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程