demo4

つ微凉徒眸挚半

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

阅读量580

点赞数

文章标签： javascript 前端 html

于 2023-01-11 18:05:13 首次发布

本文链接：https://blog.csdn.net/weixin_73696461/article/details/128648862

版权

demo4

要求：
1.发送按钮点击后，会被禁用；
2.被点击后，按钮里面的内容会变化成1分钟的倒计时；
3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。
思路：
1.点击按钮后相应的button的disable的值应该为true，便可以导致按钮无法提交
2.在倒计时结束时，button的disable的值应该为false，便可以让按钮可以提交
3.获取实时input框中的值，看是否等于0505
4.在每次点击按钮时，清除上一个计时器，以便当前计时器的正常执行

<!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>Document</title>
</head>
<style>
    #insert{
        box-sizing: border-box;
        display: block;
        width: 200px;
        height: 30px;
        border-radius: 16px;
        border: 2px solid pink;
        outline: none;
        float: left;
        font-size: 25px;
        line-height: 25px;
    }
    #btn{
        background-color: antiquewhite;
        border-radius: 50%;
        box-sizing: border-box;
        width: 60px;
        height: 30px;
        float: left;
        border: 2px solid pink;

    }
</style>
<body>
    <input type="text" id="insert"><button id="btn">提交</button>
    <script>
        var btn=document.getElementById("btn");
        var second=60;
        var timer;
        click();
        function click(){
            clearInterval(timer);
            btn.onclick=function(){
            var insert=document.getElementById("insert");
            var text=insert.value;
                if(text=="0505"){
                    alert("成功");
                }
                else{
                       retime();
                       btn.disabled=true;
                    }
            }
     }
    function retime(){
        clearInterval(timer);
        timer=setInterval(function(){
        if(second<=0){
            second=60;
        }
        second--;
        btn.innerHTML=second;
            if(second==0){
                    btn.innerHTML="提交";
                    clearInterval(timer);
                    click();
                    btn.disabled=false;
                }
        },1000)

    }
        
    </script>
</body>
</html>

在这里插入图片描述

つ微凉徒眸挚半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo4

1.点击按钮后相应的button的disable的值应该为true，便可以导致按钮无法提交。2.在倒计时结束时，button的disable的值应该为false，便可以让按钮可以提交。3.待发送按钮被触发后才可以点击提交按钮，需在验证码框里填写0505，用弹窗提示成功。4.在每次点击按钮时，清除上一个计时器，以便当前计时器的正常执行。2.被点击后，按钮里面的内容会变化成1分钟的倒计时；3.获取实时input框中的值，看是否等于0505。1.发送按钮点击后，会被禁用；
复制链接

扫一扫