小程序时间倒序怎么设置

小程序时间倒序怎么设置,第1张

设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白界面,过2秒后才显示计时界面,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时。

实现效果:根据案例描述做出如下图效果,初始显示空白界面,2秒后显示计时界面(图1),数字为60,点击“开始计时”按钮后开始倒计时,点击“停止计时”按钮后停止计时(图2)。

index.wxml

<!--index.wxml-->

<view class="container">

  <view wx:if="{{hidden}}">

    <view class="title">计时器</view>

    <view class="play">{{num}}</view>

    <view class="btn">

      <button bindtap="start">开始计时</button>

      <button bindtap="stop">停止计时</button>

    </view>

  </view>

</view>

index.js

// index.js

// 获取应用实例

var num = 60//定义开始秒数

//定义一个布尔变量,用于停止计时器

var ynStop=false

Page({

  data: {

    //用于显示计算器

    hidden: false,

    num: num

  },

  //渲染出计时器

  onLoad() {

    //function里颂键直接用this会出错

    var that =this

    //延时显示函数

    setTimeout(function(){

    //设置隐藏属性为否

    that.setData({

      hidden:true

    })

  }

  //野雀巧设置延时为2s

    , 2000)

  },

 

  start: function () { //开始计时函数

    //设置显示器值为当前值减一

    this.setData({

      num: num--

    })

    //调用timer函数

    this.timer()

    //后台打印num值

    console.log(num)

  },

 

  stop: function () {  //停止函数

    //将是否停止循环值定义为真

      ynStop=true

    console.log(ynStop)

  },

  timer: function () { //计时函数

 

    if (num >0&&ynStop==false) {

      //隔一秒回调start函数,注岁历意setTimeout里函数不要加括号,或者用function(){}

      setTimeout(this.start, 1000)

    } else {

      this.setData({

        num: 0

      })

    }

  }

#include "mainwindow.h"

#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :

QMainWindow(parent),

ui(new Ui::MainWindow)

{

ui->setupUi(this)

this->m_timerid = 0

this->connect(ui->pushButton,SIGNAL(clicked()),this,SLOT(on_Start_b_clicked()))

this->connect(ui->pushButton_2,SIGNAL(clicked()),this,SLOT(on_Stop_b_clicked()))

}

MainWindow::~MainWindow()

{

delete ui

}

void MainWindow::on_Start_b_clicked()

//这是我定义的一个按钮当按下这个按钮时执行下面的 *** 作

{

m_timerid = this->startTimer(1000)

}

void MainWindow::timerEvent(QTimerEvent *event)

{

QString s=ui->Msecond->text()

ui->Msecond->野前戚setText(QString::number(s.toInt()+1))

}

void MainWindow::on_Stop_b_clicked()/悔贺/停止颂陵的按钮

{

if (m_timerid != 0)

{

this->killTimer(this->m_timerid)

m_timerid = 0

}

}

在微信小程序中,可以利用 `setInterval()` 函数来实现长时间计时的功能。

具体步骤如下:

1. 在需要计时的页面或组件中定义一个计时器变量,如 `timer`,并初始化为 0。

2. 使用 `setInterval()` 函数,在一段时间间隔内执行一次指定的函数(比如每秒钟执行一次),并将返回值赋给计时器变量,如:

```

timer = setInterval(function() {

// 在这吵陪里编写计时器的逻辑

}, 1000)// 以毫秒为单位,表示每秒钟执行一次

```

3. 在计时器函数中编写计时器的逻辑,如:

```

var second = 0// 定义一个秒数变量

function timerFunction() {

second++// 每秒钟秒数加一

console.log("已经计时了 " + second + " 秒")

}

```

4. 当需要停止计时器时,可以使用 `clearInterval()` 函数消迹来清除计时器,如:

```

clearInterval(timer)// 停止计时器

```

完整示例代码:

```

var timer// 计时器变量

Page({

data: {

second: 0 // 秒数

},

onLoad: function () {

this.startTimer()// 页面加载时启动计时器

},

startTimer: function () {

var that = this

timer = setInterval(function() {

that.setData({

second: that.data.second + 1 // 每秒钟秒数加一

})

console.log("已经计时了 " + that.data.second + " 秒")

}, 1000)// 以毫秒为单位,表示每秒钟执行升桥蠢一次

},

stopTimer: function () {

clearInterval(timer)// 停止计时器

}

})

```


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12454446.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存