微信小程序 - 考试倒计时
发布时间:2021-09-07 09:12:34作者:顺晟科技点击:

源码如下(csdn提供了思路 , 多谢 ,第二个小程序项目,有惊无险(_。_):
1 Page({
2 /**
3 * 页面的初始数据
4 */
5 data: {
6 timer: \'\', //定时器名字
7 countDownNum: \'5\' //倒计时初始值
8 },
9 onLoad: function() {
10 this.countDown();
11 },
12 start: function() {
13 clearInterval(this.data.timer);
14 this.data.countDownNum = 6;
15 this.countDown();
16 },
17 countDown: function() {
18 let that = this;
19 let countDownNum = that.data.countDownNum; //获取倒计时初始值
20 //如果将定时器设置在外面,那么用户就看不到countDownNum的数值动态变化,所以要把定时器存进data里面
21 that.setData({
22 timer: setInterval(function() { //这里把setInterval赋值给变量名为timer的变量
23 //每隔一秒countDownNum就减一,实现同步
24 countDownNum--;
25 //然后把countDownNum存进data,好让用户知道时间在倒计着
26 that.setData({
27 countDownNum: countDownNum
28 })
29 //在倒计时还未到0时,这中间可以做其他的事情,按项目需求来
30 if (countDownNum == 0) {
31 //这里特别要注意,计时器是始终一直在走的,如果你的时间为0,那么就要关掉定时器!不然相当耗性能
32 //因为timer是存在data里面的,所以在关掉时,也要在data里取出后再关闭
33 clearInterval(that.data.timer);
34
35 //关闭定时器之后,可作其他处理codes go here
36 }
37 that.data.countDownNum = 6;
38 }, 1000)
39 });
40 }
41 })
View Code
1. 在onload载入时,缓存list数据,开始计时,调用this.countDown();(到达60s以后,再次调用本身),即可实现每一题到达60s以后自动跳转到下一题 ->自动
2. 单题计时60s,点下一题时,清除上一题计时器,并且再次调用this.conutDwon() -> 手动;
- 上一篇 : 微信小程序 - 答题进度条
- 下一篇 : 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题


