Home > Article > WeChat Applet > WeChat applet uses JS to implement the 60s countdown function for registration

WeChat applet uses JS to implement the 60s countdown function for registration

黄舟Original: 2018-05-15 15:38:051861browse

This article mainly introduces the 60s countdown function for WeChat Mini Program registration, and the use of JS to implement the 60s countdown function for registration. It has certain reference value. Interested friends can refer to

WeChat Mini Program +WEB uses JS to implement the registration [60s] countdown function development steps:

1. Rendering:

##2. The page is only Utilizes the related functions of JS, including: wxml, js, wxss

2.1wxml page code:

<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 page code:

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 page code:

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

3. The above is about the WeChat applet, so what should our general web or mobile version look like?

Actually, the methods are similar, and they are posted here for your reference only

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

The above is the detailed content of WeChat applet uses JS to implement the 60s countdown function for registration. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The implementation process of asynchronous process processing by Promise in WeChat appletNext article：The implementation process of asynchronous process processing by Promise in WeChat applet

See more

WeChat applet uses JS to implement the 60s countdown function for registration

Related articles