html验证码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><label>验证码</label><input type="button"id="cod

秋泠鸢

3445人浏览 · 2022-04-13 15:23:17

秋泠鸢 · 2022-04-13 15:23:17 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button"  id="code">
<form class="layui-form" lay-filter="queryForm">
<button type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="mybtn">Button</button>
</form>
<script src="layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['layer'],function () {
        let layer=layui.layer
        let $=layui.jquery
        $(function () {
            // 页面初始化生成验证码
            window.onload=createCode('#code')
            // 验证码切换
            $("#code").on('click',function () {
                createCode('#code');
            })
        })

        // 生成验证码
        function createCode(codeID) {
            var code="";
            var codeLength = 4;
            var checkCode = $(codeID);
            var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
            for (var i = 0; i < codeLength; i++) {
                var index = Math.floor(Math.random() * 36);
                code += random[index]
            }
            checkCode.val(code)
            layer.msg(code,{icon:6,title:'验证码',btn:['知道啦'],btnAlign: 'c',closeBtn: 2,time:5000})
        }

		//生成固定位数数字
		    function randomNum(n) {
            var res = "";
            for (var i = 0; i < n; i++) {
                res += Math.floor(Math.random() * 10);
            }
            return res;
        }
        
   			form.on('submit(mybtn)', function () {
	            var timeRun = 0;
	            var interval = setInterval(function () {
	                timeRun += 1;
	                var resultNum = randomNum(6);
	                layer.msg(resultNum);
	                console.log(timeRun);
                if (timeRun === 5) {
                    layer.msg("计时结束，共计时"+timeRun+"次");
                    clearInterval(interval);
                }
            }, 1000)
        });
		
    })

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