欢迎光临,了解微信小程序开发,就上易用通! QQ登录

微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒

发布:2018-01-31 10:25浏览:来源:网络 编辑:cola

因为小程序的限制,所以直接选用时间选择器作为选择定时器的小时和分钟。唯一的缺点就是不能选择秒。
 
一开始的想法是选择的到一个字符串以后,截取字符串转换成数字然后和以前一样不停的计算。什么计算秒数,换算成分数啊之类的
 
想想虽然不难但还是太麻烦了。就想有没有简单易懂的实现方法。
 
首先想到的就是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这种格式来书写代码(安卓未进行测试)
 
好了,最后,我承认我是个标题党,其实我还是计算了两下的。




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。

在线客服1:
点击这里给我发消息

在线客服2:
点击这里给我发消息

商务客服:
点击这里给我发消息

服务时间:
9:00-18:00(工作日)