微信小程序-倒计时功能实现代码

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

// app.jsApp({ onLaunch: function () { // 小程序启动时执行的代码 }, globalData: { countdown: 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: null, }, startCountdown: function () { const app = getApp() let count = 10 // 设置倒计时秒数 app.globalData.countdown = setInterval(() => { count-- app.globalData.countdown = count this.setData({ countdown: app.globalData.countdown }) if (count === 0) { clearInterval(app.globalData.countdown) // 倒计时结束,清除定时器 } }, 1000) // 每秒更新一次倒计时数字 }})

这个小程序有一个页面,页面上有一个按钮。当用户点击按钮时,程序会调用startCountdown函数,开始一个倒计时器。倒计时器每秒钟更新一次,将剩余秒数存储在全局变量countdown中,并使用setInterval方法定时更新页面上的倒计时数字。当倒计时结束时,程序会清除定时器并停止更新倒计时数字。请注意,这只是一个简单的示例,实际应用中可能需要更多的错误处理和界面优化。

相关文章