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


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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
vue 如何使用递归组件
Oct 23 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
微信小程序实现日期格式化和倒计时
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
来自phpguru得Php Cache类源码
2010/04/15 PHP
php重定向的三种方法分享
2012/02/22 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
js function使用心得
2010/05/10 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
django如何连接已存在数据的数据库
2018/08/14 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
入团者的自我评价分享
2013/12/02 职场文书
培训心得体会
2013/12/29 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年班级工作总结范文
2015/04/03 职场文书