欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序开发倒计时自动补零效果的功能插件

    2018-05-11 09:38 来源/作者:懒人模板 分类:小程序教程  « »
    1、wxml页面调用:
    <text>{{timeText}}</text>  
    2、js代码页面代码如下:
    //index.js  
    var num = 10//计时  
    var strH = ''  
    var strM = ''  
    var strS = ''  
    var timer = ''  
       
    Page({  
      data: {  
        timeText:''//展示  
      },  
       
      onLoad: function () {  
        this.move()  
        //计时开始 后面的1000是毫秒 每1000毫秒跳一次  
       timer=setInterval(this.move,1000);  
      },  
       
      move(){  
        //时  
        strH =  this.zeroFill(''+parseInt(num/3600%24),2)  
       
        //分  
        strM =  this.zeroFill(''+parseInt(num/60%24),2)  
       
        //秒  
        strS = this.zeroFill(''+parseInt(num%60),2)  
       
        //赋值给text内容  
        this.setData({  
          timeText:strH+':'+strM+':'+strS  
        })  
           
        //当时间归零停止计时器  
        if (num == 0){  
            clearInterval(timer)  
            return  
        }  
      
        //每秒递减  
        num--  
      },  
      zeroFill(str, n){  
        //补零方法,str为数字字符串 n为需要的位数,不够补零  
        if  (str.length < n){  
          str = '0'+str  
        }  
        return str  
      }  
    }) 
    希望对正在开发有需求朋友有帮助!

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议