微信小程序 - 考试倒计时

源码如下(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() -> 手动;
微信小程序 - 考试倒计时的更多相关文章
- 微信小程序之倒计时插件 wxTimer
微信小程序之倒计时插件 wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...
- 微信小程序单个倒计时效果
var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...
- 微信小程序 - 考试状态不同显示
未开考 .已交卷. 考试中 .考试结束 #ddd #f00 #ff0 默认禁用色 禁用的button仅有style起作用,四个状态,通过wx:if ... elif ... e ...
- 微信小程序 列表倒计时
最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...
- 微信小程序 验证码倒计时组件
https://blog.csdn.net/susuzhe123/article/details/80032224
- 微信小程序 - 考试前三排名实现
实现原理:利用背景图片以及nth-child实现
- 微信小程序----团购或秒杀的批量倒计时实现
效果图 实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS模拟商品列表数据 goodsList:在 onLoad 周期函数中对活动结束时间进行提取:建立时间格式化函数 ti ...
- 微信小程序60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...
- 微信小程序【获取验证码】倒计时效果
最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...
随机推荐
- hdu 4176
Class Statistics Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 重做LVM文件系统之减小PV
命令 缩小PV空间到120G,即PV上的vg00已将缩小到120G pvresize --setphysicalvolumesize 120g /dev/sda2 背景 机器上有一块900G本地的本地 ...
- [nowcoder_Wannafly挑战赛4_F]线路规划
[nowcoder_Wannafly挑战赛4_F]线路规划 试题描述 Q国的监察院是一个神秘的组织. 这个组织掌握了整个帝国的地下力量,监察着Q国的每一个人. 监察院一共有 \(N\) 个成员,每一个 ...
- 论S B的自我修养 【2015/10/18更】
to do list: 1.正则表达式引擎 (done 2.五子棋AI jquery && canvas 游戏 (这个搞定好多好玩的idea可以实现了php 暂时不想玩各种框架吧, ...
- 满汉全席(banquet)
满汉全席(banquet) 题目描述 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做 ...
- Ubuntu安装opencv with cuda
Ubuntu安装opencv with cuda 为了运行dense flow真是折腾啊,下面网址是教程 http://blog.aicry.com/ubuntu-14-04-install-open ...
- JavaScript 笔记(7) -- 在HTML中嵌入 js (外部引用)
本节主要说明,在HTML中嵌入自定义 JavaScript.通过HTML的script标签加载JavaScript文件 为防止网页加载缓慢,也可以把非关键的JavaScript放到网页底部,例如下面的 ...
- 地精部落(bzoj 1925)
Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...
- final、finalize()、finally、static
一.final final的三种情况: 1.变量 1)对于基本类型,final使数值恒定不变:而对于对象引用,final使引用恒定不变,即一旦引用被初始化指向一个对象,就无法再把它改为指向另一个对象, ...
- LeetCode OJ-- Generate Parentheses *
https://oj.leetcode.com/problems/generate-parentheses/ 输入n产生n个( ,n个 )组成的所有合法的括号组合. 现在纸上画画,找到规律: 1.每一 ...