记录一下注册页面编写遇到的一些细节和坑。
验证码刷新问题:
<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方法暴露在浏览器的状态栏。