源码如下(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. Format aborted in 格式化namenode 失败的原因

    [user6@das0 hadoop-0.20.203.0]$ bin/hadoop namenode -format 12/02/20 14:05:17 INFO namenode.NameNode ...

  2. 【bzoj4012】[HNOI2015]开店 动态点分治+STL-vector

    题目描述 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的想法当然非常好啦,但是她们也发现她们面临着一个问题 ...

  3. ZigBee学习五 无线温度检测

    ZigBee学习五 无线温度检测 1)修改公用头文件GenericApp.h typedef union h{ uint8 TEMP[4]; struct RFRXBUF { unsigned cha ...

  4. 前端构建工具gulpjs的使用介绍及技巧(转)

    http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学 ...

  5. CF 964C Alternating Sum

    给定两正整数 $a, b$ .给定序列 $s_0, s_1, \dots, s_n,s_i$ 等于 $1$ 或 $-1$,并且已知 $s$ 是周期为 $k$ 的序列并且 $k\mid (n+1)$,输 ...

  6. hihoCoder 1133 二分·二分查找之k小数(TOP K算法)

    #1133 : 二分·二分查找之k小数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回里我们知道Nettle在玩<艦これ>,Nettle的镇守府有很 ...

  7. Django模板中include的标签的使用

    在很多网站中,基本上的都会有一个开头和一个结尾,在每一个网页中都会显示.相对于这种的来说,在Django中,最好的方法就是使用include的标签,在每一个模板中都加入这个开头和结尾的标签. 官方文档 ...

  8. react 当中重新渲染dom的方法

    有个upload 重复上传同名文件的需求,在网上找了很多解决方案都不好使,在react当中解决该问题其实很简单,其实无法上传同名文件 的原因是因为无法触发onChange事件,只需要刷新改dom就可以 ...

  9. 关于fixed定位的一些错误看法纠正

    之前由于一些误导,一直感觉fixed这个定位在ie8下面是会出现兼容问题的,今天发现这个想法太绝对了,它只是在ie7 8 的怪异模式下面会出现兼容问题 解决这个问题可以通过用absolute来模拟fi ...

  10. 转::iOS 仿淘宝,上拉进入详情页面

    今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 // // ViewCo ...