转载注明出处

改成了一个单独的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无计算实现定时器(将字符串或秒数转换成倒计时)的更多相关文章

  1. 在微信小程序中使用LeanCloud(一)

    之前学习了微信小程序前端,使用到LeanCloud线上数据库 [传送门].作为一个前端开发人员,了解后端及数据库是学习工作的需要. LeanCloud直接登录,未注册直接创建账户.它是一款免费的线上数 ...

  2. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  3. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  4. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  5. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  6. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  7. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  8. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...

  9. 微信小程序中scroll-view的几个坑

    微信小程序中scroll-view的几个坑 1:设置scroll-x时,却不能横向滚动,因为view是block组件,但是这里用了flex就不能滚动了(想用flex布局,请开启属性enable-fle ...

随机推荐

  1. 论文阅读(Xiang Bai——【CVPR2015】Symmetry-Based Text Line Detection in Natural Scenes)

    Xiang Bai--[CVPR2015]Symmetry-Based Text Line Detection in Natural Scenes 目录 作者和相关链接 方法概括 创新点和贡献 方法细 ...

  2. [USACO2004][poj2375]Cow Ski Area(在特殊图上用floodfill代替强联通算法)

    http://poj.org/problem?id=2375 题意:一个500*500的矩形,每个格子都有一个高度,不能从高度低的格子滑到高度高的格子(但相等高度可以滑),已知可以在2个相邻格子上加桥 ...

  3. 【转】Linux高级字符设备之Poll操作

    原文网址:http://www.cnblogs.com/geneil/archive/2011/12/04/2275559.html 在用户程序中,select()和poll()也是与设备阻塞与非阻塞 ...

  4. java 中流的使用

    Java中的流,可以从不同的角度进行分类. 一.按照数:输入流和输出流. 输出流: 输入流: 因此输入和输出都是从程序的角度来说的. 二.按照处理数据单位不同可以分为:字节流和字符流. 字节流和字符流 ...

  5. silverlight游戏在坑内发展

    最初做<金X>使用silverlight它是由于右手锯的深蓝色silverlight游戏开发教程,在这里,好评,写得很好的教程!基于这样的思想游戏覆盖.你可以给游戏开发商新提供的非常多的思 ...

  6. bootstrap的popover在trigger设置为hover时不隐藏popover

    使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...

  7. bash执行命令分别输出正常日志和错误日志

    0. 说明 执行bash命令的定时任务时候,希望能把正常的日志输出到一个文件里面,同时如果执行的过程发生异常则把异常日志输出到另一个不同的文件中.方便今后异常排查,极大有利于快速定位出错位置. 需要了 ...

  8. 求1+2+……+n的和

    题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). class Solution { public ...

  9. Harbor 学习分享系列2 - Harbor项目介绍

    云盘链接 链接:https://pan.baidu.com/s/19yZCZMijf1c3rTwYOqiZzw 密码:netv 通过本文无法把本文中的实验进行成功,请联系作者本人,作者会录制视频发送给 ...

  10. Js中的filter()方法

    /* filter()方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组. filter()基本语法: arr.filter(callback[, thisArg]) filte ...