微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

http://www.jb51.net/article/121336.htm

1、效果图： 

2、页面仅仅利用了JS的相关功能，包含：wxml、js、wxss 

2.1wxml页面代码：

?

1 2 3 4 5 6 7 8 9 10 11 12

< text >绑定手机</ text > < form bindsubmit = "bindMobile" > < view class = "form_group" >      < text >手 机：</ text >      < input type = "number" placeholder = "请输入手机号" maxlength = "11" name = "data_phone" value = "" auto-focus = "true" bindblur = "blur_mobile" />      < button type = "button" class = "{{is_show?'show':'hide'}}" bindtap = "clickVerify" >获取验证码</ button >      < button type = "button" class = "{{is_show?'hide':'show'}}" >重新发送{{last_time}}秒</ button >    </ view >   < input type = "number" placeholder = "请输入验证码" maxlength = "6" name = "data_verify" value = "" /> < button class = "save_btn" form-type = "submit" >确认绑定</ button > </ form >

2.2 js页面代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

var countdown = 60; var settime = function (that) {   if (countdown == 0) {    that.setData({     is_show: true    })    countdown = 60;    return ;   } else {    that.setData({     is_show: false ,     last_time:countdown    })      countdown--;   }   setTimeout( function () {    settime(that)   }    , 1000) }   Page({   /**    * 页面的初始数据    */   data: {    last_time: '' ,    is_show: true   },     clickVerify: function (){    var that = this ;   // 将获取验证码按钮隐藏60s，60s后再次显示     that.setData({      is_show: (!that.data.is_show)  //false     })     settime(that);   }     })

2.3 wxss页面代码：

?

1 2 3 4 5 6 7

/* 发送验证码按钮隐藏，并展示倒数60s提示 */ . hide {   display : none ; } . show {   display : block ; }

3、上面讲的是微信小程序的，那么我们一般web端或者移动端的应该是什么样呢？

其实，方法都差不多，这里也贴出来仅供大家参考

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!-- 这段代码(html)是从脚本之家挪过来的，信誉度应该是很高的，大家可以放心使用 -->   < script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></ script > < script type = "text/javascript" > var countdown=60; function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value="免费获取验证码"; countdown = 60; return; } else { obj.setAttribute("disabled", true); obj.value="重新发送(" + countdown + ")"; countdown--; } setTimeout(function() { settime(obj) } ,1000) } </ script > < body > < input type = "button" id = "btn" value = "免费获取验证码" onclick = "settime(this)" /> </ body > </ html >