基于考研题库小程序V2.0实现倒计时功能板块和超时判错功能

V2.0

需求沟通

需求分析

计时模块

3.1.1、功能描述←计时模块用于做题过程中对每一题的作答进行30秒倒计时,超时直接判错,同时将总用时显示在界面上;记录每次做题的总用时。

3.1.2、接口描述←与判定模块的接口为超时判定,若单题用时超过 30秒则算作错误,需要将信号给到判定模块:当用户开始做答或点击确认时接收信号,开始或是结束计时:与与本地数据库的接口为储存,需要保存单次(15题)的总用时信息用于历史记录查看。

3.1.3、数据结构描述计时的秒数为 int 整型,需要有计时结束时触发的回调函数,用于通知外部模块。对于本地缓存,可使用wx.setStorageSync来进行存储。

3.1.4、实现思路

此模块逻辑较简单清晰,可在is文件中直接编写函数,注意设置对外接口。

实现过程

计时模块用于做题过程中对每一题的作答进行30秒倒计时,超时直接判错。

技术点:倒计时+判错。

计时模块用于做题过程中对每一题的作答进行30秒倒计时,超时直接判错。使用selfInterval实现倒计时功能,每隔一秒执行一次,超时直接判错逻辑函数。

​​​​​​​

复制代码
// 计时模块用于做题过程中对每一题的作答进行30秒倒计时,超时直接判错const totalSeconds = 30;
// 使用selfInterval实现倒计时功能countDownStart() {    this.setData({      seconds: totalSeconds    });    selfInterval = setInterval(()=>{      this.data.seconds--      this.setData({        seconds: this.data.seconds      });      if(this.data.seconds == 0){        clearInterval(selfInterval);        selfInterval = null;        // 超时直接判错逻辑函数        this.onCountDownfinished();      }    }, 1000);  },

实现效果

相关推荐
绝世唐门三哥14 小时前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
酉鬼女又兒16 小时前
零基础快速入门计算机组成原理:《DRAM 刷新方式小结 & SRAM/DRAM 优劣及主存缓存划分》
考研·职场和发展·电脑·计算机组成原理
人还是要有梦想的17 小时前
如何开发小程序介绍
小程序·notepad++
roamingcode19 小时前
支付宝小程序数据可视化避坑指南:@antv/f2 踩坑与最佳实践
信息可视化·小程序·canvas·antv
做cv的小昊20 小时前
【TJU】研究生应用统计学课程笔记(1)——第一章 数理统计的基本知识(1.1 数理统计的基本内容、1.2 数理统计的基本概念)
笔记·线性代数·考研·数学建模·ai·矩阵·概率论
2501_9159214320 小时前
HTTP和HTTPS协议全面解析:技术原理与安全应用
安全·http·ios·小程序·https·uni-app·iphone
double_eggm1 天前
微信小程序2
微信小程序·小程序
lwewan2 天前
CPU 调度
笔记·考研
是江迪呀2 天前
实时看大家都在干嘛?我靠一行监听函数,做了个轻互动小程序
前端·微信小程序
码视野2 天前
课后报名小程序 — 从需求到原型的全栈实践
小程序