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

 更新时间:2017年06月13日 16:28:36   作者:PHP急先锋  
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时,格式如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);
},

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    这篇文章主要介绍了JavaScript中window和document用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • js数组高阶函数之includes()方法总结

    js数组高阶函数之includes()方法总结

    JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值,在 JS中,数组是由中括号 [] 括起来的数值序列,本篇文章给大家介绍js数组高阶函数——includes()方法,感兴趣的朋友一起看看吧
    2023-12-12
  • js拖拉表格实现内容计算

    js拖拉表格实现内容计算

    这篇文章主要为大家详细介绍了js拖拉表格实现内容计算,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • TextArea设置MaxLength属性最大输入值的js代码

    TextArea设置MaxLength属性最大输入值的js代码

    TextArea中限制最大输入长度,实现的方法种种,我们不在一一介绍,今天本文推荐一种简单实用的方法,需要的朋友可以参考下
    2012-12-12
  • JavaScript制作简单的框选图表

    JavaScript制作简单的框选图表

    这篇文章主要为大家详细介绍了JavaScript制作一个简单的框选图表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript循环遍历小结

    JavaScript循环遍历小结

    本文给大家总结了javascript中的循环遍历,给大家总结的非常全面,感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • JavaScript中常见的字符串操作函数及用法汇总

    JavaScript中常见的字符串操作函数及用法汇总

    这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换、分割、查询、替换等技巧,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • javascript绘制漂亮的心型线效果完整实例

    javascript绘制漂亮的心型线效果完整实例

    这篇文章主要介绍了javascript绘制漂亮的心型线效果实现方法,结合完整实例形式分析了JavaScript图形绘制的具体步骤与相关实现技巧,需要的朋友可以参考下
    2016-02-02
  • JS获取当前网址、主机地址项目根路径

    JS获取当前网址、主机地址项目根路径

    本文为大家提供JS如何获取当前网址、主机地址之后的目录及项目根路径的方法,喜欢的朋友可以收藏下
    2013-11-11
  • 详解js根据百度地图提供经纬度计算两点距离

    详解js根据百度地图提供经纬度计算两点距离

    这篇文章主要介绍了js根据百度地图提供经纬度计算两点距离,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论