微信小程序定时器setInterval定时器使用基本方法

最新推荐文章于 2023-08-21 20:07:40 发布

原创

最新推荐文章于 2023-08-21 20:07:40 发布 · 3.3k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了微信小程序中使用setInterval实现倒计时的基本方法，通过示例代码展示了如何在index.wxml、index.js和index.wxss文件中进行操作。

setInterval最常用的倒计时来一波
index.wxml


  <view class="container">

    <view class="countdown">{
  
  {time}}S</view>

    <view class="countBtn">
      <button class="countStart" bindtap="startBtn">开始</button>
      <button class="countStop" bindtap="stopBtn">停止</button>
      <button class="countRestart" bindtap="restartBtn">重新开始</button>
    </view>

  </view>

index.js

Page({
  data: {
    time: 10, //初始时间
    interval: "" //定时器
  },

  /**
   * 点击开始按钮
   */
  startBtn: function () {
    var that = this;
    that.init(that); //初始化数据
    var time = that.data.time;
    console.log("倒计时开始")
    var interval = setInterval(function () {
      time--;
      that.setData({
        time: time
      })
      if (time == 0) { //归0时回到10
        that.restartBtn();
      }
    }, 1000)

    that.setData({
      interval: interval

标签