微信小程序中利用时间选择器和js无计算实现定时器

2017-01-04

今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时。


因为小程序的限制,所以直接选用时间选择器作为选择定时器的小时和分钟。唯一的缺点就是不能选择秒。


一开始的想法是选择的到一个字符串以后,截取字符串转换成数字然后和以前一样不停的计算。什么计算秒数,换算成分数啊之类的


想想虽然不难但还是太麻烦了。就想有没有简单易懂的实现方法。


首先想到的就是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这种格式来书写代码(安卓未进行测试)


好了,最后,我承认我是个标题党,其实我还是计算了两下的。




0
收藏