随机四位数的验证码（可以提交，自动更新）

最新推荐文章于 2024-08-18 10:54:05 发布

幼儿崽

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量143

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129131754

版权

该网页示例展示了如何使用HTML、CSS和JavaScript创建一个动态验证码功能。用户需在输入框中输入显示的四位数字验证码，点击按钮进行验证。若输入正确，会显示成功提示；错误则重新生成验证码。同时，页面还有一个倒计时计时器，当计时结束时，提示跳转并可选择重定向至其他网站。

摘要由CSDN通过智能技术生成

<!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>
    <style>
        div {
            user-select: none;
            text-align: center;
            font-size: 50px;
            color: black;
            width: 150px;
            height: 50px;
            line-height: 50px;
            background: pink;
        }

        .box {
            position: fixed;
            height: 200px;
            line-height: 200px;
            width: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: red;
        }
    </style>
</head>

<body>
    <div></div>
    <input type="text">
    <button>提交</button>
    <div class="box"></div>
    <script>
        //获取页面元素
        var div = document.querySelector('div');
        var box = document.querySelector('.box');
        var input = document.querySelector('input');
        var btn = document.querySelector('button');
        var box = document.querySelector('.box');
        //随机函数
        function getRandon(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        // 调用随机函数
        div.innerHTML = getRandon(1000, 9999);
        // 点击button
        btn.onclick = function () {
            //if判断是否输入验证码或者输入的是空格
            if (input.value.trim() === '') {
                alert('请输入正确的验证码');
            }
            if (input.value === div.innerHTML) {
                alert('成功');
            } else {
                alert('失败');
                input.value = ''
                div.innerHTML = getRandon(1000, 9999)
            }
        }
        //点击封装验证码的div时让验证码自动更新
        div.onclick = function () {
            div.innerHTML = getRandon(1000, 9999);
        }
        var num = 5;
        //计时器
        var timer = setInterval(function () {
            box.innerHTML = num;
            num--;
            if (num < 0) {
                clearInterval(timer)
                alert('跳转');
                // location.href = 'https://www.baidu.com'
            }
        }, 1000)
    </script>
</body>

</html>