今天是要做自己的商城系统的,登录页想弄个验证码,一开始没头绪去网上找了一些看,发现都好麻烦,不适合我这类入门级菜鸟看,于是综合看的几个例子自己写了一个。相对来说比较浅显易懂,适合学习。高手绕道哈哈哈
html代码:
<input id="t1" type="text" name="u" placeholder="验证码" onblur="but()" />
<span id="yzm" onclick="createcode()"></span>
js代码:
<script>
window.onload=function(){
createcode(); //防止首次进入页面不显示验证码,在页面加载就执行这个函数
}
function createcode(){
//创建验证码函数
var code; //在全局 定义验证码
code = "";
var codeLength =4;//验证码的长度
var selectChar = new Array(2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k',
'm','n','p','q','r','s','t','u','v','w','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的 去掉1,l,0,o
for(var i=0;i<codeLength;i++)
{
var charIndex =Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
// 设置验证码的显示样式,并显示
document.getElementById("yzm").style.fontFamily="Fixedsys"; //设置字体
document.getElementById("yzm").style.letterSpacing="5px"; //字体间距
document.getElementById("yzm").style.color="#0ab000"; //字体颜色
document.getElementById("yzm").innerHTML=code; // 显示
}
</script>
数组里去掉了 1,l,0,o,因为在页面展示时不易区分
点击验证码就可以刷新了,注释也是很详细了,一起学习