위 챗 애플 릿 등록 60s 카운트다운 기능 JS 로 등록 60s 카운트다운 기능 구현

위 챗 애플 릿+WEB 는 JS 를 사용 하여 등록[60s]카운트다운 기능 개발 절 차 를 실현 합 니 다.
1.효과 도: 
 
2.페이지 는 JS 의 관련 기능 만 이용 하고 wxml,js,wxs 를 포함한다. 
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?'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 페이지 코드:

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 페이지 코드:

/*          ,     60s   */
.hide{
 display: none;
}
.show{
 display: block;
} 
3.위 에서 말 한 것 은 위 챗 애플 릿 입 니 다.그러면 우리 일반 웹 엔 드 나 모 바 일 엔 드 는 어떻게 해 야 합 니까?
사실 방법 이 많 지 않 습 니 다.여기 도 여러분 이 참고 하 실 수 있 도록 붙 여 놓 았 습 니 다.

<!--     (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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기