在制作网站注册时，遇到了 手机验证码的问题，虽然不是做前端的，但是 作业需要，自己还是老实的写了个按钮倒计时的js事件。
主要实现的功能：
- 点击下按钮时，开始倒数计时。
- 当计数为0的时候，回到原状态，不进行计数
- 再次点击进行计数
实现步骤：
- 获得id对应的标签
- 设置该标签value为number--;从60倒数计时
- 计数为0，设置value=原内容,并将number重新赋值为60
- 计数不为0就setTimeout重复执行该function
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="javascript">
var $ =function(id){
return document.getElementById(id);
};
var number=60;
function click1(){
$("get_pass").value=number+"秒";
number=number-1;
//当计数为0的时候，还原内容 并将number=60
if(number<0){
$("get_pass").removeAttribute("disabled");
$("get_pass").value="获取验证码";
number=60;
}else{
$("get_pass").setAttribute("disabled",false);
setTimeout("click1()",1000);
}
}
</script>
</head>
<body>
<input id="get_pass" type="button" class="phone_button" value="获取验证码" onClick="click1()">
</body>
</html>
另一种交互的ajax：
var InterValObj; //timer变量，控制时间
var count = 5; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 4;//验证码长度
function sendMessage() {
curCount = count;
// var dealType; //验证方式
// var uid=$("#uid").val();//用户uid
// if ($("#phone").attr("checked") == true) {
// dealType = "phone";
// }
// else {
// dealType = "email";
// }
//产生验证码
for (var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9)+"";
}
//设置button效果，开始计时
$("#get_pass").attr("disabled", "true");
$("#get_pass").val("请在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
$.ajax({
type: "POST", //用POST方式传输
url:"RegistServlet?code="+code+"", //目标地址 是一个servlet
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (msg){ }
});
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#get_pass").removeAttr("disabled");//启用按钮
$("#get_pass").val("重新发送验证码");
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
else {
curCount--;
$("#get_pass").val("请在" + curCount + "秒内输入验证码");
}
}
/* 点击验证码改变有验证码的Js事件 */
function changeImage(){
/* 调用servlet进行显示 */
document.getElementById("image").src = "ChecKImageServlet?"+ new Date().getTime();
}
html 代码：
<input id="get_pass" type="button" class="phone_button" value="获取验证码" onClick="sendMessage()">
记得引入jquery文件:
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
servlet接收端：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String codeString = request.getParameter("code");
//测试输出
System.out.println(codeString);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//相互调用
doGet(request, response);
}
在做网站收集验证码的过程中，使用的是阿里大鱼（阿里巴巴的产品），比较可靠，而且速度很快，对于做作业的学生来说不需要什么成本，测试成功，在后期的博文中会给大家 介绍和基本的使用。
时间： 2024-08-17 05:08:18