js随机验证码(原创)

Html

Css

#code {
	width:200px;
	height:100px;
	background-color:#ddd;
	padding:10px;
	line-height:100px;
	text-align:center;
	font-size:20px;
	color:red;
	font-weight:bold;
}
input {
	outline:none;
}

window.onload = function() {
    //保存全局，与新输入的验证码进行校验
    var code;
    //获取对应的标签
    var codeDiv = document.getElementById('code');
    var newCodeInput = document.getElementById('nweCode');
    var validate = document.getElementById('validate');
    //加载页面获取对应的验证码
    creatCode();
    //获取min到max之间的整数(1~100)
    function random(max, min) {
        return Math.floor(Math.random() * (max - min) + min);
    }

function creatCode() {
        //设置默认的空字符串
        code = '';
        //设置长度
        var codeLength = 4;
        var randomCode = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'L', 'J', 'K', 'I', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        for (var i = 0; i < codeLength; i++) {
            //设置随机范围0~36
            var index = random(0, 36);
            code += randomCode[index];
        }
        codeDiv.innerHTML = code
    }

//验证按钮校验
    validate.onclick = function() {
        //获取用户新输入验证码
        var newCode = newCodeInput.value.toUpperCase();
        if (newCode == code) {
            //验证成功 跳转对应网址
            //window.location.href = 'https://www.baidu.com';
            alert('验证码通过')
        } else {
            alert('验证码不正确，请重新输入')
            //输入框值清空
            newCodeInput.value = '';
            //重新获取验证码
            creatCode();
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js随机验证码(原创)

代码描述：纯js随机验证码代码

更新时间：2020-08-19 01:07:54

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Hugo

相关代码

js随机验证码(原创)

最新