위 챗 애플 릿 등록 60s 카운트다운 기능 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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.