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


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 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
使用vue-router设置每个页面的title方法
Feb 11 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 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
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
python的即时标记项目练习笔记
2014/09/18 Python
Python 多核并行计算的示例代码
2017/11/07 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python实现按日期归档文件
2021/01/30 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
2014年销售工作总结
2014/12/01 职场文书