• HTML

123

• 倒计时JS

//验证码var counts = 60;function settime(val) {
    if(counts == 0) {
        val.removeAttribute("disabled");
        val.value = "获取验证码";
        counts = 60;
        return false;
    } else {
        val.setAttribute("disabled", true);
        val.value = "重新发送（" + counts + "）";
        counts--;
    }
    setTimeout(function() {
        settime(val);
    }, 1000);}123456789101112131415161718

• Ajax接口JS

$(function(){
   //获取验证码
    $("#verCodeBtn").click(function() {
        var userinfo = {
            "UserPhoneNum": '86//' + $("input[name='phone']").val()
        }

        $.ajax({
            url: "https://www.xxxxx.cn/user/sendcode/",
            data: userinfo,
            type: "get",
            success: function(data) {
                if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
                    alert("验证码发送失败")
                } else {
                    alert("验证码发送成功，请耐心等待")
                }
            },
            error: function() {
                alert("发送失败");
            }
        });
    });})

文本框 ：

按钮：

[removed]

function addNumber(everyone)

{

document.getElementById("text1").value += everyone;

}

[removed]

   

    发送验证码

[removed]

    var bt01 = document.getElementById("bt01");

    bt01.onclick = function() {

        bt01.disabled = true;   //当点击后倒计时时候不能点击此按钮

        var time = 5;   //倒计时5秒

        var timer = setInterval(fun1, 1000);    //设置定时器

        function fun1() {

            time--;

            if(time>=0) {

                bt01[removed] = time + "s后重新发送";

            }else{

                bt01[removed] = "重新发送验证码";

                bt01.disabled = false;    //倒计时结束能够重新点击发送的按钮

                clearTimeout(timer);    //清除定时器

                time = 5;   //设置循环重新开始条件

            }

        }

    }

[removed]

style

.wrap{

width: 270px;

border: 1px solid #ccc;

display: flex;

padding: 10px;

}

.wrap .btn{

padding: 5px 10px;

text-align: center;

background: #666;

color: #fff;

}

.wrap input{

flex:1;

}

比较完整的写法：

注：1.若直接在本页跳转到新的页面，则用：

　　2.如果需要打开一个新的页面进行跳转，则用：

HTML添加文本框方法：，里面可以输入信息，还可以限制输入的字符数，宽度等。

按钮：

[removed]

function addNumber(everyone)

{

document.getElementById("text1").value += everyone;

}

[removed]

html页面中添加文本框，用到的工具，notepad++,步骤如下：

html代码部分：

 姓名：

网页效果图如下：

注意事项：input要配合form表单用。