Rumah > Artikel > applet WeChat > 微信小程序使用JS实现注册60s倒计时功能

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

黄舟asal: 2018-05-15 15:38:051906semak imbas

这篇文章主要介绍了微信小程序注册60s倒计时功能，以及使用JS实现注册60s倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序+WEB使用JS实现注册【60s】倒计时功能开发步骤：

1、效果图：

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

2.1wxml页面代码：

<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?&#39;show&#39;:&#39;hide&#39;}}" bindtap="clickVerify">获取验证码</button>
    <button type="button" class="{{is_show?&#39;hide&#39;:&#39;show&#39;}}">重新发送{{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页面代码：

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:&#39;&#39;,
  is_show:true
 },

 clickVerify:function(){
  var that = this;
 // 将获取验证码按钮隐藏60s，60s后再次显示
   that.setData({
    is_show: (!that.data.is_show)  //false
   })
   settime(that);
 }


})

2.3 wxss页面代码：

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

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

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

<!-- 这段代码(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>

Atas ialah kandungan terperinci 微信小程序使用JS实现注册60s倒计时功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：微信小程序中Promise进行异步流程处理的实现过程Artikel seterusnya：微信小程序实现删除处理的案例

Artikel berkaitan

Lihat lagi