微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处
改成了一个单独的js文件,并且修改成了插件,点击这里查看
今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时。
因为小程序的限制,所以直接选用时间选择器作为选择定时器的小时和分钟。唯一的缺点就是不能选择秒。
一开始的想法是选择的到一个字符串以后,截取字符串转换成数字然后和以前一样不停的计算。什么计算秒数,换算成分数啊之类的
想想虽然不难但还是太麻烦了。就想有没有简单易懂的实现方法。
首先想到的就是js中的Date()
因为这个函数可以传字符串获取毫秒数,传毫秒数获取字符串。那么总体上来看,应该是可行的。
思路:
首先我们的需求是,用户需要通过时间选择器一个时间,这个时间选择器传出来的就是一个类似"12:25"这样的字符串,前面是小时,后面是分钟,我们需要把这个字符串转换成秒数才好进行倒计时。
因为前面已经提到了Date函数,那么我们需要的是将这个字符串转换成毫秒数。所以,我们将字符串拼接,并得到毫秒数:
var endTime = new Date("1970/01/01 "+time+":00");
其中的time就是我们的时间选择器传出来的字符串了。
前面的年月日你随便设置就行,这个无所谓,反正后面是要被截掉的。
得到毫秒数以后我们就要开始倒计时啦。
这时我们需要开启一个定时器,这个定时器里面有什么内容呢?最为关键的就是利用Date函数来获取日期。(这不吃饱了撑的么,刚换算成秒数,你又要换算成日期???excuse me???别急,继续往下看)
然后需要一个count,setInterval每执行一次,就+1,聪明的同学应该到这里就清楚我们该怎么做了。
没错,请看:
var count = 0;
setInterval(function(){
var time = new Date(endTime.getTime()-1000*count++);
time = time.toString().substr(16,8);
},1000);
但是,这里有个问题就是时间到0了以后没有停止。那怎么办呢。这个时候我们的程序就要稍微改一下了。
var count = 0;
var intervarID = setInterval(function(){
var time = new Date(endTime.getTime()-1000*count++);
time = time.toString().substr(15,9);
if(that.data.time == "00:00:00"){
clearInterval(intervarID);
}
},1000);
这样,我们就完美的实现了一个定时器啦。
下面上小程序部分的代码:
// 页面初始化 options为页面跳转所带来的参数
var endTime = new Date("2011/01/01 "+options.time+":00");
//初始化定时器
this.setData({
time:options.time+":00"
});
//开始倒计时
var that=this;
var count = 0;
this.data.intervarID = setInterval(function(){
console.log(that.data.time + " " + count);
var time = new Date(endTime.getTime()-1000*count++);
that.setData({
count:count+1,
time:time.toString().substr(16,8)
});
if(that.data.time == "00:00:00"){
clearInterval(that.data.intervarID);
}
},1000);
最后需要注意的是:
在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中
在 Android 上,小程序的 javascript 代码是通过 X5 内核来解析
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs(chrome内核) 中
这ios和开发工具的内核在Date() 函数的输入上有一定的差别。开发工具上的支持2011-11-11这种格式,但是ios的不支持,所以就采用2011/11/11这种格式来书写代码(安卓未进行测试)
好了,最后,我承认我是个标题党,其实我还是计算了两下的。
微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)的更多相关文章
- 在微信小程序中使用LeanCloud(一)
之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...
- 微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...
- 微信小程序中用户登录和登录态维护
提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- 微信小程序中获取高度及设备的方法
由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...
- 微信小程序中scroll-view的几个坑
微信小程序中scroll-view的几个坑 1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-fle ...
随机推荐
- Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记
以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...
- C语言 · 整数平均值
编写函数,求包含n个元素的整数数组中元素的平均值.要求在函数内部使用指针操纵数组元素,其中n个整数从键盘输入,输出为其平均值. 样例输入: (输入格式说明:5为输入数据的个数,3 4 0 0 2 是以 ...
- C# i=0;i=i++,i的值是多少?
昨天看群里dalao们聊天,有一个人出来问这个问题 这个题应该是挺常见的 int i = 0, t; for(t = 0;t <= 5;t++) { ...
- javascript中的事件冒泡和事件捕获
1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...
- ubuntu系统下如何修改host
Ubuntu系统的Hosts只需修改/etc/hosts文件,在目录中还有一个hosts.conf文件,刚开始还以为只需要修改这个就可以了,结果发现是需要修改hosts.修改完之后要重启网络.具体过程 ...
- 尝试asp.net mvc 基于controller action 方式权限控制方案可行性
微软在推出mvc框架不久,短短几年里,版本更新之快,真是大快人心,微软在这种优秀的框架上做了大量的精力投入,是值得赞同的,毕竟程序员驾驭在这种框架上,能够强力的精化代码,代码层次也更加优雅,扩展较为方 ...
- Log4net - 项目使用的一个简单Demo
参考页面: http://www.yuanjiaocheng.net/entity/entitytypes.html http://www.yuanjiaocheng.net/entity/entit ...
- [转载]强制不使用“兼容性视图”的HTML代码
在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...
- Spring aop应用之实现数据库读写分离
Spring加Mybatis实现MySQL数据库主从读写分离 ,实现的原理是配置了多套数据源,相应的sqlsessionfactory,transactionmanager和事务代理各配置了一套,如果 ...
- docker4dotnet #2 容器化主机
.NET 猿自从认识了小鲸鱼,感觉功力大增.上篇<docker4dotnet #1 前世今生&世界你好>中给大家介绍了如何在Windows上面配置Docker for Window ...