字体渐变随机验证码（原创）

Html

Css

p {
	font-family:font-weight:bold;
	letter-spacing:50px;
	width:100%;
	height:300px;
	background:linear-gradient(to right,red,blue);
	-webkit-background-clip:text;
	color:transparent;
	line-height:300px;
	font-size:200px;
	text-align:center;
}

$(function() {
    var code; //alert(typeof code);
    var onCode = $('#code'); // alert(bun_1.length);
    var p = $('p'); // alert(p.length);
    onCode.on('click', function() {
        code = '';
        var codeLength = 4;
        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'];
        var Color = ['red', 'blue', 'yellow', 'pink', 'green', 'black'];
        for (var i = 0; i < codeLength + 1; i++) {
            var index = Math.floor(Math.random() * 36);
            var ColorIndex = Math.floor(Math.random() * 6);
            console.log(Color[ColorIndex]);
            //                  p.css('border','1px '+Color[ColorIndex]+' solid');
            p.css('border', '1px solid ' + Color[ColorIndex] + '');
            code += random[index];
        }
        p.text(code);
    })
    var Verification = $('.Verification');
    Verification.on('click', function() {
        var ipt = $('#input').val().toUpperCase();
        if (ipt.length == 0) {
            alert('你是不是忘了啥？比如：验证码！');
        } else if (ipt != p.text()) {
            alert('你验证码输错了，重输！！！');
            //                      alert(p.text());
            //                      alert(ipt);
        } else {
            alert('真棒，验证成功');
        }
    })
    onCode.click();
})

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

立即下载

字体渐变随机验证码（原创）

代码描述：jQuery随机验证码,不兼容IE

在以前写的随机验证码的基础上改的，以前是只支持谷歌，今天发现火狐也支持了,感觉以后可能会用的上，发出来给大家分享一下！

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

轻酌~浅醉

相关代码

字体渐变随机验证码（原创）

最新