微信小程序-点击按钮后倒计时

以下是一个简单的微信小程序示例,可以显示一个按钮和点击按钮后的倒计时:

// app.js
App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    countdown: 10,
    timer: null
  }
})
<!-- index.wxml -->
<view class="container">
  <button bindtap="startCountdown">开始倒计时</button>
  <text>倒计时剩余: {{ countdown }}</text>
</view>
/* index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
}
// index.js
Page({
  data: {
    countdown: 10,
  },
  startCountdown: function () {
    const app = getApp()
    if (app.globalData.timer === null) {
      app.globalData.timer = setInterval(() => {
        app.globalData.countdown -= 1
        this.setData({ countdown: app.globalData.countdown })
      }, 1000)
    } else {
      clearInterval(app.globalData.timer)
      app.globalData.timer = null
    }
  }
})

这个小程序有一个页面,页面上有一个按钮。当用户点击按钮时,会启动一个倒计时,每秒钟减少1,倒计时剩余时间显示在页面上。如果用户再次点击按钮,倒计时将停止,并重新开始计时。