微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）

最新推荐文章于 2025-06-14 09:48:05 发布

丶枕边人

最新推荐文章于 2025-06-14 09:48:05 发布

阅读量9.7k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：动态倒计时

本文链接：https://blog.youkuaiyun.com/nan961136007/article/details/97750589

本文介绍了如何在微信小程序中实现15分钟的订单支付倒计时功能，当客户未在规定时间内完成支付，系统会自动取消订单。内容包括wxml、wxss和js的代码示例，详细注解帮助理解代码逻辑。

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

这是制作的订单支付前倒计时，如果客户在规定时间内没能支付，则系统自动删除，这样就以便有些商品冗余，当然了，这里只有分钟和秒钟，天数和时钟我写在了最底下，最后代码的显示第七行，可以看一下，然后带入到相应的地方。

这是实现的效果，每秒钟都在onload（）里面被调用，然后自动动态倒计时。
在这里插入图片描述

其实难度不是很大，有一些代码防止你们看不懂，我会在下面注解出来的。

首先还是wxml

<view class='demo-text2'>
          <text>倒计时：{
  
  {countdown}}</text>
        </view>

其次是wxss

.demo-text2 {
  font-size: 28rpx;
  color: #ff7ba8;
}

我就加了一个颜色，哈哈哈哈~，你们可以根据自己的意思加字和东西，很好加的。

最后就是最重要的js里，注释我会写在最下面的。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.countDown();
  },

  //倒计时
  countDown() {
    var that = this

    var starttime = '2019/07/30 09:04:19'

    var start = new Date(starttime.replace(/-/g, "/")).getTime()
    var endTime = start