小程序列表倒计时使用wxs实现

本文介绍了如何在微信小程序中创建一个倒计时功能。通过`formatterTimer`函数,将传入的日期字符串转换为时间戳,并计算剩余时间,显示为分钟:秒的格式。在WXML文件中引入并调用此函数,可以方便地实现在前端展示倒计时的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建一个wxs文件

/**
 * gb
 * 列表展示倒计时(传入事件格式为字符串:2021-02-18 12:00:00) 
 * systimestamp:当前时间,compareTime:结束时间
 */
var formatterTimer = function (systimestamp, compareTime) {
  var result = {};
  var nowTime = systimestamp; // 当前时间的时间戳 也就是系统时间戳

  var reg = getRegExp("-", "g"); // 获取正则表达式,全局替换
  var str = compareTime.replace(reg, '/'); // 时间格式转换
  // 将字符串转换成时间格式
  var timePublish = getDate(str).valueOf();

  var futureTime = getDate(timePublish).getTime(); // 比较时间的时间戳
	// 未来的时间减去现在的时间 ;
	
	//有时会多一分钟,在这里可以减一分钟即可。
  var resTime = (futureTime - nowTime) / 1000;
  // 结束时间
  var zero = futureTime - nowTime;
  if (zero >= 0) { // 认为还没有到达结束的时间
      var h = (Math.floor(resTime / 3600)) < 10 ? '0' + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));
      var m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
      var s = (Math.floor(resTime % 60)) < 10 ? '0' + (Math.floor(resTime % 60)) : (Math.floor(resTime % 60));
			// h + ':' +
      result =  m + ':' + s;
      result.status = true;
  } else {
		// 00:
      result = '00:00';
      result.status = false;
  }
  return result;
};
//将倒计时方法导出
module.exports = {
	formatterTimer: formatterTimer
}

wxml文件引入

<wxs src="../../utils/countDown.wxs" module="countdown" />
//在wxml文件内使用该方法,systimestamp在js文件内获取系统时间,第二个参数为倒计时结束时间传入即可
countdown.formatterTimer(systimestamp,item.expirationTime)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值