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


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 相关文章推荐
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JavaScript函数详解
2014/11/17 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
关于vue里页面的缓存详解
2019/11/04 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中常用的高阶函数实例详解
2020/02/21 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
趣味运动会活动方案
2014/02/12 职场文书
会计专业自荐书
2014/07/08 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫