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


Posted in Javascript onJune 20, 2019

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

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);
      }
    })
  }  
})

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

Javascript 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 05 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 #Javascript
微信小程序实现商城倒计时
Nov 01 #Javascript
微信小程序实现批量倒计时功能
Nov 01 #Javascript
微信小程序实现订单倒计时
Nov 01 #Javascript
Vue监听页面刷新和关闭功能
Jun 20 #Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 #Javascript
js实现页面多个日期时间倒计时效果
Jun 20 #Javascript
You might like
我的论坛源代码(九)
2006/10/09 PHP
php GD绘制24小时柱状图
2008/06/28 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
jquery鼠标停止移动事件
2013/12/21 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
js+canvas实现验证码功能
2020/09/21 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python绘制彩虹图
2019/12/16 Python
Python selenium的基本使用方法分析
2019/12/21 Python
浅析Python 多行匹配模式
2020/07/24 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
c语言常见笔试题总结
2016/09/05 面试题
恒华伟业笔试面试题
2015/02/26 面试题
升职自荐书范文
2013/11/28 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
运动会报道稿大全
2015/07/23 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis