驗證碼倒計時協助類CountDownButtonHelper的實現，手機驗證碼倒計時
轉載請註明出處：http://blog.csdn.net/zhaokaiqiang1992
我們在做有關簡訊驗證碼功能的時候，為了防止使用者無休止的擷取簡訊驗證碼，或者是誤操作，造成驗證碼混亂的情況，我們一般在擷取驗證碼功能的Button上面加上倒計時功能，從而限制使用者擷取驗證碼的間隔。
今天這篇文章，是介紹如何使用CountDowmTimer實現驗證碼的倒計時功能的。
先看
CountDownTimer是一個系統提供的一個關於倒計數的類，我們可以設定倒計時的總時間，還有倒計時的間隔，這樣每過一段固定時間，我們就可以在回呼函數中進行我們的操作。下面是CountDownTimer類的回調方法和建構函式。
CountDownTimer timer = new CountDownTimer(AllTime,Intevel) { @Override public void onTick(long millisUntilFinished) { } @Override public void onFinish() { } };
第一個參數是總時間，第二個是倒計時間隔。
onTick()是倒計時到了間隔時間之後的回呼函數。
onFinish()是計時結束之後調用的函數。
下面，給出我的倒計時協助類。
package com.example.countdowntimerdemo;import android.os.CountDownTimer;import android.util.Log;import android.widget.Button;/** * 倒計時Button協助類 * * @author zhaokaiqiang * @see http://blog.csdn.net/zhaokaiqiang1992 */public class CountDownButtonHelper {// 倒計時timerprivate CountDownTimer countDownTimer;// 計時結束的回調介面private OnFinishListener listener;private Button button;/** * * @param button * 需要顯示倒計時的Button * @param defaultString * 預設顯示的字串 * @param max * 需要進行倒計時的最大值,單位是秒 * @param interval * 倒計時的間隔，單位是秒 */public CountDownButtonHelper(final Button button,final String defaultString, int max, int interval) {this.button = button;// 由於CountDownTimer並不是準確計時，在onTick方法調用的時候，time會有1-10ms左右的誤差，這會導致最後一秒不會調用onTick()// 因此，設定間隔的時候，預設減去了10ms，從而減去誤差。// 經過以上的微調，最後一秒的顯示時間會由於10ms延遲的積累，導致顯示時間比1s長max*10ms的時間，其他時間的顯示正常,總時間正常countDownTimer = new CountDownTimer(max * 1000, interval * 1000 - 10) {@Overridepublic void onTick(long time) {// 第一次調用會有1-10ms的誤差，因此需要+15ms，防止第一個數不顯示，第二個數顯示2sbutton.setText(defaultString + "(" + ((time + 15) / 1000)+ "秒)");Log.d("CountDownButtonHelper", "time = " + (time) + " text = "+ ((time + 15) / 1000));}@Overridepublic void onFinish() {button.setEnabled(true);button.setText(defaultString);if (listener != null) {listener.finish();}}};}/** * 開始倒計時 */public void start() {button.setEnabled(false);countDownTimer.start();}/** * 設定倒計時結束的監聽器 * * @param listener */public void setOnFinishListener(OnFinishListener listener) {this.listener = listener;}/** * 計時結束的回調介面 * * @author zhaokaiqiang * */public interface OnFinishListener {public void finish();}} 測試原始碼，請關注我的github
https://github.com/ZhaoKaiQiang/CountDownTimerDemo
t=setTimeout("timedCount()",1000)
改為
t=setInterval("timedCount()",1000)
function stopCount(){
clearTimeout(t);
}
改為
function stopCount(){
clearInterval(t);
}
JS幫忙改下這段手機驗證碼倒計時效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="">
.class1{
background-color:green;
}
.class2{
background-color:red;
}
.class3{
background-color:blue;
}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer變數，控制時間
var count = 5; //間隔函數，1秒執行
var curCount;//當前剩餘秒數
var code = ""; //驗證碼
var codeLength = 6;//驗證碼長度
function sendMessage() {
$("#btnSendCode").removeClass("class1");
$("#btnSendCode").addClass("class2");
curCount = count;
var dealType; //驗證方式
var uid=$("#uid").val();//使用者uid
if ($("#phone").attr("checked") == true) {
dealType = "phone";
}
else {
dealT......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
