验证码刷新、倒计时

记录一下注册页面编写遇到的一些细节和坑。

验证码刷新问题：

<script>
    function refresh_captcha(){
        document.getElementById("captcha").src="/basic/verifycode/?"+Math.random();
    }
</script>

由于浏览器的缓存问题，如果两次都是同样的值（src=’/basic/verifycode/’），浏览器一般都不会刷新，因此这边用到了一个小技巧，改变提交的随机数。

发送验证码倒计时

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		invokeSettime($(this));
	});
});


function invokeSettime(obj){
    var countdown=60;
    settime(obj);
    function settime(obj) {
        if (countdown == 0) {
            obj.attr("disabled",false);
            obj.text("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr("disabled",true);
            obj.text("(" + countdown + ") s 重新发送");
            countdown--;
        }
        setTimeout(function() {
                    settime(obj) }
                ,1000)
    }
}

</script>
<body>
    <button id="btn" type="button">获取验证码</button>
</body>
</html>

a标签添加点击事件：

<a href="javascript:void(0)" onclick="refresh_captcha()">

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。