字体渐变JS仿随机验证码效果

Html

Css

Js

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

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