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


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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
详解vue高级特性
Jun 09 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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
php导出中文内容excel文件类实例
2015/07/06 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python采集微信公众号文章
2018/12/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
文员自我评价怎么写
2013/09/19 职场文书
骨干教师培训感言
2014/01/16 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
社会学专业求职信
2014/02/24 职场文书
歌唱比赛主持词
2014/03/18 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
会议通知格式范文
2015/04/15 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技