Javascript点击事件获取四位数验证码
写一个简单的四位数验证码以供大家学习
以下是HTML代码:
CSS代码:
JS代码:
//点击事件触发生成四位数字验证码
document.getElementById("btn").onclick = function () {
//初始化idCode----->idCode为四位数验证码
var idCode = "";
//颜色的首字符
var str = "#";
//颜色数组 0~9 a~f
var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
//验证码数字:0~9 英文:a~z, A~Z 总共62个
var nums = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h",
"j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "A", "W", "E", "R", "T", "Y", "U", "I",
"O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M",
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
//字号
var idFonsize = ["1", "2", "3", "4", "5", "6", "7"];
//随机生成四个验证码
for (var i = 0; i < 4; i++) {
//随机生成六位十六进制颜色值
for (var j = 0; j < 6; j++) {
var sum = arr[parseInt(Math.random() * 16)];
str += sum;
}
//随机生成验证码的数字或者字母的下标0~61
var p = parseInt(Math.random() * 62);
//随机获取字号大小的下标0~6
var f = parseInt(Math.random() * 7);
//拼接随机生成颜色和字体大小的验证码
idCode += "" + nums[p] + "";
}
//innerHTML用于设置或返回指定标签之间的 HTML 内容 这里是把idCode添加到 id="getCode"的标签下面
document.getElementById("getCode").innerHTML = idCode;
};
写得很一般,不要介意哈