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


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:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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简单提示框alert封装函数
2010/08/08 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
jquery cookie插件代码类
2009/05/26 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python集合是否可变总结
2019/06/20 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
大学生简短的自我评价分享
2014/02/20 职场文书
网络管理员岗位职责
2014/03/17 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书