源码如下(csdn提供了思路 , 多谢 ,第二个小程序项目,有惊无险(_。_):

 Page({
/**
* 页面的初始数据
*/
data: {
timer: '', //定时器名字
countDownNum: '5' //倒计时初始值
},
onLoad: function() {
this.countDown();
},
start: function() {
clearInterval(this.data.timer);
this.data.countDownNum = 6;
this.countDown();
},
countDown: function() {
let that = this;
let countDownNum = that.data.countDownNum; //获取倒计时初始值
//如果将定时器设置在外面,那么用户就看不到countDownNum的数值动态变化,所以要把定时器存进data里面
that.setData({
timer: setInterval(function() { //这里把setInterval赋值给变量名为timer的变量
//每隔一秒countDownNum就减一,实现同步
countDownNum--;
//然后把countDownNum存进data,好让用户知道时间在倒计着
that.setData({
countDownNum: countDownNum
})
//在倒计时还未到0时,这中间可以做其他的事情,按项目需求来
if (countDownNum == 0) {
//这里特别要注意,计时器是始终一直在走的,如果你的时间为0,那么就要关掉定时器!不然相当耗性能
//因为timer是存在data里面的,所以在关掉时,也要在data里取出后再关闭
clearInterval(that.data.timer); //关闭定时器之后,可作其他处理codes go here
}
that.data.countDownNum = 6;
}, 1000)
});
}
})

1. 在onload载入时,缓存list数据,开始计时,调用this.countDown();(到达60s以后,再次调用本身),即可实现每一题到达60s以后自动跳转到下一题 ->自动

2. 单题计时60s,点下一题时,清除上一题计时器,并且再次调用this.conutDwon() -> 手动;

微信小程序 - 考试倒计时的更多相关文章

  1. 微信小程序之倒计时插件 wxTimer

    微信小程序之倒计时插件   wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...

  2. 微信小程序单个倒计时效果

    var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...

  3. 微信小程序 - 考试状态不同显示

    未开考 .已交卷. 考试中 .考试结束 #ddd      #f00     #ff0    默认禁用色 禁用的button仅有style起作用,四个状态,通过wx:if ... elif ... e ...

  4. 微信小程序 列表倒计时

    最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...

  5. 微信小程序 验证码倒计时组件

    https://blog.csdn.net/susuzhe123/article/details/80032224

  6. 微信小程序 - 考试前三排名实现

    实现原理:利用背景图片以及nth-child实现

  7. 微信小程序----团购或秒杀的批量倒计时实现

    效果图 实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS模拟商品列表数据 goodsList:在 onLoad 周期函数中对活动结束时间进行提取:建立时间格式化函数 ti ...

  8. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  9. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

随机推荐

  1. mvc项目限制请求类型

    MVC 5限制所有HTTP请求必须是POST方式 这篇文章讲述了如何限制请求类型.

  2. 关于Android应用中图片占用内存浅谈

    从事过移动端应用开发的童鞋应该都清楚,内存是非常宝贵的资源.如果能很好的利用有限的内存,对应用性能的提升会有很大的帮助.在实际应用开发中图片内存占整个应用非常大的比重,我们只有了解图片是如何加载到内存 ...

  3. BZOJ 1864:[Zjoi2006]三色二叉树(树DP)

    三色二叉树 问题描述 输入 仅有一行,不超过500000个字符,表示一个二叉树序列. 输出 输出文件也只有一行,包含两个数,依次表示最多和最少有多少个点能够被染成绿色. 样例输入 1122002010 ...

  4. 流浪者(rover)

    流浪者(rover) 题目描述 有一位流浪者正在一个n∗mn∗m的网格图上流浪.初始时流浪者拥有SS点体力值. 流浪者会从(1,1)(1,1)走向(n,m)(n,m),并且他只会向下走((x,y)→( ...

  5. Codeforces Round #442 Div.2 A B C D E

    A. Alex and broken contest 题意 判断一个字符串内出现五个给定的子串多少次. Code #include <bits/stdc++.h> char s[110]; ...

  6. 初始化home目录

    mkdir WORKM 公共资料 科学研究 临时文档 项目开发 正在学习 专职教学 自作文档

  7. vim配置文件解析

    我的vim配置文件如下: "根据时段的不同自动选择不同的配色方案 ""if strftime("%H") < 6 "6:00     ...

  8. JavaScript正则表达

    Javascript 与正则表达式 一.正则表达式(regular expression简称res) 1.定义: 一个正则表达式就是由普通字符以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找 ...

  9. nodejs后台启动

    可避免关闭窗口,程序就关闭,可在后台运行 安装forever包,一般用于服务器,调试环境可不安装 npm install forever -g 启动方式如图: 查询后台运行哪些程序 forever l ...

  10. 点击事件与UICollectionView的代理事件的冲突问题

    发现的问题:在UIImageView上添加UICollectionView视图,点击UICollectionViewCell,不执行didSelectItemAtIndexPath的代理方法. 解决方 ...