实现发送验证码功能的HTML-CSS-JSDemo,-优快云博客

发送验证码

一、Demo
- <1>.要求
- <2>.功能
二、实现原理
代码
四、效果展示

一、Demo

<1>.要求

1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时；
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。

<2>.功能

区分在页面上进行输入操作的是人还是机械化的代码编程。

二、实现原理

思路：html和css部分正常进行，JS部分注意点在于：倒计时60如何设置和点击事件
第一个：定义seconds储存时间，用delay再储存seconds，通过if else语句和delay--实现倒计时；
第二个：通过if else语句实现验证码的正确输入。

代码

<1>.Html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送验证码</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>
        <form>
            <p>验证码</p>
            <input type="text" placeholder="请输入验证码" id="captcha">
            <button >发送</button>
            <input type="submit" value="提交" id="submit">
        </form>
    </div>



    <script src="./index.js"></script>
</body>
</html>

<2>.Css部分

*{
    margin: 0;
    padding: 0;
}

form{
    width: 400px;
    height: 140px;
    margin: 250px auto;
    padding-top: 50px;
    border: 1px solid #000;
    text-align: center;
    
}

input{
    outline: none;
}
#captcha{
    width: 170px;
    height: 30px;
    margin-top: 30px;
}
button{
    width: 40px;
    height: 30px;
}
#submit{
    width: 40px;
    height: 30px;
}

<3>.Js部分

let btn = document.querySelector('button');    //获取发送
var seconds = 60;        //定义延时时间
let delay = seconds;     //实现递减
let timer = null;        //定时器
btn.onclick = function(){   //实现按钮不可交互
    btn.disabled =true;
    timer = setInterval(index(),100);
}
function index(){
    if(delay != 0){
        btn.innerHTML = `${delay}s`;
        btn.style.backGroundColor = '#999';
        delay--;
    }else{
        clearInterval(timer);       //清除定时器
        btn.innerHTML = `发送`;
        delay = seconds;
        btn.disabled = false;       //恢复按钮可交互
    }
    return index;
}

//设置提交信息
var submit = document.querySelector('#submit');
var captcha = document.querySelector('#captcha');
submit.addEventListener('click',function(){
    let passWord = captcha.value;
    if( passWord == "0505"){    //通过 if else语句实现正确提交
        alert("提交成功！");
    }else{
        alert("请输入正确验证码");
    }
})

四、效果展示

发送验证码