文 | 跨屏互联

跨屏互联从事建站十多年，小程序开发多年，分享一些干货，今天不绕弯子，直接给大家带来微信小程序倒计时功能的完整实现方案，代码可直接复制运行，适配活动倒计时、限时秒杀等多种场景，新手也能快速上手。

一、wxml文件（倒计时布局，直接复制）

核心是渲染天、时、分、秒四个模块，布局简洁，可根据自己的需求修改样式类名，适配项目UI。

<!--倒计时  -->
<view class="countDownTimeView countDownAllView" >
  <view class="voteText countDownTimeText">{{countDownDay}}天</view>
  <view class="voteText countDownTimeText">{{countDownHour}}时</view>
  <view class="voteText countDownTimeText">{{countDownMinute}}分</view>
  <view class="voteText countDownTimeText">{{countDownSecond}}秒</view>
</view>

关键说明

1.  四个view分别对应天、时、分、秒，通过数据绑定渲染实时倒计时数值；

2.  样式类（countDownTimeView、voteText等）可自定义，后续可根据项目需求修改样式，不影响功能实现；

3.  无需额外引入组件，原生view标签即可实现布局。

二、js文件（核心逻辑，直接复制运行）

核心逻辑：通过定时器每秒计算剩余时间，拆分天、时、分、秒，同步更新页面数据，倒计时结束后自动提示并重置数值，完整代码如下（可直接粘贴到页面js文件中）。

Page( {
  data: {
    windowHeight: 654,
    maxtime: "",
    isHiddenLoading: true,
    isHiddenToast: true,
    dataList: {},
    countDownDay: 0, // 倒计时-天
    countDownHour: 0, // 倒计时-时
    countDownMinute: 0, // 倒计时-分
    countDownSecond: 0, // 倒计时-秒
  },
  //事件处理函数（可保留，不影响倒计时功能）
  bindViewTap: function() {
    wx.navigateTo( {
      url: '../logs/logs'
    })
  },
  onLoad: function() {
    this.setData( {
      windowHeight: wx.getStorageSync( 'windowHeight' )
    });
  },
 
  // 页面渲染完成后 调用（倒计时核心方法，关键时机）
  onReady: function () {
    // 注意：1505540080 是目标时间戳，需替换成自己的目标时间戳（单位：秒）
    var totalSecond = 1505540080 - Date.parse(new Date())/1000;
 
    // 定时器，每秒执行一次，更新倒计时
    var interval = setInterval(function () {
      // 剩余秒数
      var second = totalSecond;
 
      // 计算天数（向下取整）
      var day = Math.floor(second / 3600 / 24);
      var dayStr = day.toString();
      // 补零（单数天数/小时/分钟/秒，显示为01、02...）
      if (dayStr.length == 1) dayStr = '0' + dayStr;
 
      // 计算小时数
      var hr = Math.floor((second - day * 3600 * 24) / 3600);
      var hrStr = hr.toString();
      if (hrStr.length == 1) hrStr = '0' + hrStr;
 
      // 计算分钟数
      var min = Math.floor((second - day * 3600 *24 - hr * 3600) / 60);
      var minStr = min.toString();
      if (minStr.length == 1) minStr = '0' + minStr;
 
      // 计算秒数
      var sec = second - day * 3600 * 24 - hr * 3600 - min*60;
      var secStr = sec.toString();
      if (secStr.length == 1) secStr = '0' + secStr;
 
      // 更新页面倒计时数据
      this.setData({
        countDownDay: dayStr,
        countDownHour: hrStr,
        countDownMinute: minStr,
        countDownSecond: secStr,
      });
      totalSecond--; // 每秒递减1
 
      // 倒计时结束，清除定时器，提示活动结束并重置倒计时
      if (totalSecond < 0) {
        clearInterval(interval);
        wx.showToast({
          title: '活动已结束',
        });
        this.setData({
          countDownDay: '00',
          countDownHour: '00',
          countDownMinute: '00',
          countDownSecond: '00',
        });
      }
    }.bind(this), 1000); // 1000ms = 1s，每秒执行一次
  },
 
  //cell事件处理函数（可保留，不影响倒计时功能）
  bindCellViewTap: function (e) {
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../babyDetail/babyDetail?id=' + id
    });
  }
})

三、核心说明+避坑重点（必看）

1.  目标时间戳修改（最关键）

代码中 1505540080 是目标结束时间的时间戳（单位：秒），必须替换成自己的目标时间（比如活动结束时间）。

获取时间戳方法：百度“时间戳转换工具”，输入目标日期时间，选择“秒级时间戳”，复制替换即可。

2.  核心逻辑解析

- 页面渲染完成（onReady）后启动定时器，每秒计算一次剩余时间；

- 通过数学运算拆分剩余秒数为天、时、分、秒，并用toString()+补零逻辑，保证显示格式统一（如01天、05分）；

- 倒计时结束（totalSecond < 0），清除定时器（避免内存泄漏），弹出“活动已结束”提示，重置倒计时为00。

3.  避坑提醒

- 时间戳单位：必须是秒级，不能用毫秒级（否则倒计时会异常）；

- 定时器绑定this：必须用 .bind(this)，否则this指向错误，无法更新页面数据；

- 样式自定义：wxml中的样式类可随意修改，不影响倒计时核心功能，适配自己的项目UI即可；

- 冗余代码处理：js中bindViewTap、bindCellViewTap等无关方法，可根据自己的需求删除（不影响倒计时功能）。

总结

以上就是微信小程序倒计时的完整实现方案，wxml+js两段代码，复制粘贴后，仅需修改目标时间戳，就能直接运行。适配活动倒计时、限时秒杀、预约倒计时等所有小程序倒计时场景，代码简洁无冗余，新手也能快速落地。

---END---
欢迎关注【跨屏互联】，了解更多建站、小程序、SEO、GEO等互联网知识。

申明：若有来源错误或者侵犯您的合法权益，您可以通过邮箱与我们取得联系，我们将及时进行处理，邮箱地址：info@kuaping.com

原文链接：https://www.kuaping.com/article/show15203.html

看到这里了，顺便了解下 跨屏互联 建站Saas系统吧

注册地址：http://kuaping.com/business/register.php

市面上已经有不少自建站Saas系统了，为什么还要做跨屏Saas建站系统？这是一个外行不清楚，内行心知肚明的事情，市面上建站系统大多是拖拽式生成，这种做出来的网站代码很乱，对于seo很不好友。从事建站十多年，我见到太多了。

坚守品质，始终采用更利于seo的手写代码开发

我希望打破这个常规，跨屏互联7年自主开发的Saas建站系统，是一个费时费力的事情，我们所有模板都是手写代码开发，虽说是自助建站，但是和定制是一模一样的流程，所以出来的品质也是一模一样。而是自适应终端适配效果非常好。

对其wordpress，好过wordpress

我们是Wordpress十几年的使用者，对于wordpress我们非常熟悉，也非常喜欢，所以开发跨屏Saas建站系统的时候，汲取了来自wordpress的体验和思路。如果你也喜欢wordpress，跨屏互联的Saas建站后台你会感到熟悉。相比于wordpress，它的优势是无需购买服务器部署源码，注册账号就可以拥有前台后台，可以选择模板。

有软著 无风险，和钓鱼CMS建站系统彻底说拜拜

我们申请了软著-计算机软件著作权登记号：2017SR675691，相比于市面上有钓鱼的CMS建站系统，先免费等你下载使用，然后在起诉，选择跨屏互联SAAS建站系统，也省去了侵权风险。

我们的价格幅度从680~4980不等，不同模板不同价格，按工作量定价，让所有人都可以做得起网站，做放心的网站，做优质的网站，做价格透明的网站。