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

 更新时间:2019年06月20日 16:36:30   作者:Yako元  
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1、展示的效果如下

2、wxml代码:

<!--倒计时 -->
<text wx:if="{{clock!=''}}">仅剩{{clock}}</text>
<text wx:if="{{clock==''}}">已经截止</text>

3、js代码:

在拼团项目中获取到活动结束时间的格式为一下格式

因该格式无法正常计算时长,所进行了格式转换new Date(that.data.collage.collage_end).getTime()

// 倒计时
function countdown(that) {
 var EndTime = new Date(that.data.collage.collage_end).getTime() || [];
 // console.log(EndTime);
 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({
  onLoad: function(options) {
    wx.request({
      success: function(request) {
        // 倒计时(获取结束时间后再进行倒计时方法调用)
        countdown(that);
      }
    })
  }  
})

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

相关文章

  • JS随机数产生代码分享

    JS随机数产生代码分享

    大家在制作网页或者小程序的时候经常用到随机数,作者整理了一个很简单的JS生成随机数的程序,一起学习下。
    2018-02-02
  • JS实现数组的增删改查操作示例

    JS实现数组的增删改查操作示例

    这篇文章主要介绍了JS实现数组的增删改查操作,结合实例形式分析了javascript针对数组的追加、获取、删除、添加、修改等常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • 实现图片预加载的三大方法及优缺点分析

    实现图片预加载的三大方法及优缺点分析

    本文介绍了实现图片预加载的三大方法(CSS/JAVASCRIPT/AJAX)以及这三种方法的优缺点分析,是篇非常值得推荐的文章,小伙伴们可要仔细研究下。
    2014-11-11
  • 详解JavaScript中的箭头函数的使用

    详解JavaScript中的箭头函数的使用

    这篇文章主要是带大家一起了解一下所有有关JavaScript箭头函数的信息。文中通过示例讲解了如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误,需要的可以参考一下
    2022-11-11
  • layui实现二维码弹窗、并下载到本地的方法

    layui实现二维码弹窗、并下载到本地的方法

    今天小编就为大家分享一篇layui实现二维码弹窗、并下载到本地的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅谈es6中的元编程

    浅谈es6中的元编程

    这篇文章主要介绍了浅谈es6中的元编程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题

    这样的脚本你在ie8下调用,在ie8地址栏下按下回车后调用jquery的对像、方法什么的没有问题,但是刷新之后就有问题。就是刷新之后无论怎样你要在地址栏按一下回车。
    2010-11-11
  • js 实现数值的千分位及保存小数方法(推荐)

    js 实现数值的千分位及保存小数方法(推荐)

    下面小编就为大家带来一篇js 实现数值的千分位及保存小数方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js 利用className得到对象的实现代码

    js 利用className得到对象的实现代码

    利用className得到对象的实现代码,大家可以看下代码的实现原理。
    2011-11-11
  • javascript中call,apply,callee,caller用法实例分析

    javascript中call,apply,callee,caller用法实例分析

    这篇文章主要介绍了javascript中call,apply,callee,caller用法,结合实例形式分析了javascript中call,apply,callee,caller功能、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-07-07

最新评论