• 技术文章 >微信小程序 >小程序开发

    微信小程序中倒计时的实现代码

    不言不言2018-09-06 10:26:27原创2211
    本篇文章给大家带来的内容是关于微信小程序中倒计时的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    在商城商品信息里,会有倒计时的功能。

    20180905110008144.png

    计算时间需要转化为时间戳,但是安卓和ios系统对于识别的时间格式是不一样的,安卓对识别没有要求。IOS格式要求 2018/08/20 10:20:32,使用Date.parse()转化时间戳不会出现在IOS端无法倒计时。

    timeFormat: function(param) { //小于10的格式化函数
        return param < 10 ? '0' + param : param;
      },
      countDown: function() { //倒计时函数
        // 获取当前时间,同时得到活动结束时间数组
        let newTime = Date.parse(new Date());
        let endTimeList = this.data.actEndTimeList;
        let countDownArr = [];
        // 对结束时间进行处理渲染到页面
        endTimeList.forEach(o => {
          var strtime = o.replace(/-/g, '/');
          strtime = strtime.substring(0, 19);
          let endTime = new Date(strtime).getTime();
          let obj = null;
          // 如果活动未结束,对时间进行处理
          if (endTime - newTime > 0) {
            let time = (endTime - newTime) / 1000;
            // 获取天、时、分、秒
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            obj = {
              day: this.timeFormat(day),
              hou: this.timeFormat(hou),
              min: this.timeFormat(min),
              sec: this.timeFormat(sec)
            }
          } else { //活动已结束,全部设置为'00'
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        // 渲染,然后每隔一秒执行一次倒计时函数
        this.setData({
          countDownList: countDownArr
        })
        setTimeout(this.countDown, 1000);
      },

    相关推荐:

    基于JS实现的倒计时程序实例_javascript技巧

    jQuery团购倒计时特效实现方法_jquery

    以上就是微信小程序中倒计时的实现代码的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:微信小程序 倒计时
    上一篇:微信小程序中列表渲染的实现代码 下一篇:微信小程序中数据绑定以及简单的逻辑运算的实现代码
    大前端线上培训班

    相关文章推荐

    • jquery简单倒计时实现方法• javascript页面倒计时实例_javascript技巧• 基于jQuery+Cookie实现的防止刷新的在线考试倒计时_jquery• javascript实现倒计时并弹窗提示特效_javascript技巧• js实现发送验证码后的倒计时功能_javascript技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网