发送验证码

Smulll_

已于 2023-01-11 22:10:11 修改

阅读量604

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

于 2023-01-11 22:09:05 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128651520

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

考核二-任务四-发送验证码

需求
html部分
css部分
JavaScript部分
样式截图
实现原理

需求

在这里插入图片描述

html部分

<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>Document</title>
    <link rel="stylesheet" href="D:\Web\考核二-任务四-发送验证码\考核二-任务四.css">
</head>
<body>
       验证码： <div>
        <input type="text" id="import" value="">
    <button id="btn">发送</button>
    <button id="btn2">提交</button>
</div>

    <script src="D:\Web\考核二-任务四-发送验证码\考核二-任务四.js">
    </script>
</body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
}
ul ol{
    list-style: none;
}
a{
    text-decoration: none;
}
#btn2{
    display: none;
}
#btnP{
    float: left;
    display: block;
}
#import{
    float: left;
}

JavaScript部分

    var time = 60;
    var oTxt=document.getElementById('import')
    var obtn=document.getElementById('btn')
    var obtn2=document.getElementById('btn2')

    obtn2.disabled = true
    obtn.onclick = function(){
            var button = document.getElementById('btn');
                button.disabled = true;
                obtn2.disabled = false
            var timerId = setInterval(function() 
            {
                if(time<=0){
                    clearInterval(timerId)
                    obtn.disabled = false
                    obtn.innerHTML='发送'
                }else{
                    obtn.disabled = true
                    obtn.innerHTML="还有"+time+"秒结束"
                    time  = time -1
                }
            },1000)
        }
    obtn2.onclick = function(){
        if(oTxt.value==0505)
        {alert("成功")}
        else{
            alert("错误")
        }
    }