微信小程序 - 考试倒计时
源码如下(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 ...
随机推荐
- chilitags使用心得
chilitags是一个相当好的CV方向的开源项目,不过在github上follow的人不多, 国内也基本没有这方面的消息,前几天同事给我安利了这个,使用了一下和看了源码以后..我觉得这个东西以后一定 ...
- 洛谷 P1783 海滩防御
题目描述 WLP同学最近迷上了一款网络联机对战游戏(终于知道为毛JOHNKRAM每天刷洛谷效率那么低了),但是他却为了这个游戏很苦恼,因为他在海边的造船厂和仓库总是被敌方派人偷袭.于是,WLP动用了他 ...
- VS扩展工具
原文发布时间为:2011-03-09 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/site/search ...
- time stamp in javascript
JavaScript 获取当前时间戳: 第一种方法: var timestamp = Date.parse(new Date()); 结果:1280977330000 第二种方法: var times ...
- Linux下的软连接和硬链接
由于教学上的原因,需要下载Android源码,后来使用repo时,系统提示需要python2,我的系统中是两个都有的,但是默认是python3,无法下载,通过创建了个链接搞定,下面就来说说linux下 ...
- hdu 1852(快速幂模+有除法的时候取模的公式)
Beijing 2008 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others)Tota ...
- Linux centos 时间不同步 date 和 hwclock 时间不一致
Linux centos 时间不同步 date 和 hwclock 网站有两台服务器,date 查看差3分钟 在应用 APP倒计时 与 直播,时时性较强的功能应用中 请求服务器后返回的服务器时间与数据 ...
- 交换机的MAC地址作用
交换机的MAC地址在交换机进行数据交换时是没有作用的,因为交换机并不对转发的数据帧进行拆包重封装. 如果只是完成数据帧交换,则可以不要MAC地址(仅指二层交换机,三层交换机完成路由功能自然每个端口得有 ...
- ATOM入坑必备插件
Atom作为Javascript/CSS/HTML等前端编辑器利器,其强大功能依靠各种插件,以下是笔者在入坑阶段,精挑细选总结出的必不可少的插件,熟悉运用这些插件,一定成吨提高生产效率.安装这些插件只 ...
- Ceres Solver: 高效的非线性优化库(一)
Ceres Solver: 高效的非线性优化库(一) 注:本文基于Ceres官方文档,大部分由英文翻译而来.可作为非官方参考文档. 简介 Ceres,原意是谷神星,是发现不久的一颗轨道在木星和火星之间 ...