js点击按钮倒计时---servlet并接收_servlet 实现倒计时效果-CSDN博客

本文介绍如何使用JavaScript实现点击按钮后开始倒计时，当倒计时结束恢复原状态，并可通过Servlet处理相关逻辑。点击按钮时，设置标签的value为从60开始递减的倒计时，当计数到0时，恢复原value值并重新设定倒计时为60。通过setTimeout函数实现持续计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在制作网站注册时，遇到了手机验证码的问题，虽然不是做前端的，但是作业需要，自己还是老实的写了个按钮倒计时的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);
	}

在做网站收集验证码的过程中，使用的是阿里大鱼（阿里巴巴的产品），比较可靠，而且速度很快，对于做作业的学生来说不需要什么成本，测试成功，在后期的博文中会给大家介绍和基本的使用。