以下是一个简单的微信小程序示例,可以显示一个按钮和点击按钮后的倒计时:
// app.jsApp({ 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.jsPage({ 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,倒计时剩余时间显示在页面上。如果用户再次点击按钮,倒计时将停止,并重新开始计时。