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

最新推荐文章于 2025-05-12 14:53:00 发布

山沟沟里的娃

最新推荐文章于 2025-05-12 14:53:00 发布

阅读量579

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_34856863/article/details/125884992

小程序专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在微信小程序中创建一个倒计时功能。通过`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)