js+html制作简单验证码

时间：2021-05-26

本文实例为大家分享了JavaScript制作验证码的具体代码，供大家参考，具体内容如下

<html><head><meta charset="utf-8"/><title>js验证码</title><style type="text/css"> #login{ width:50px; height:30px; line-height:30px; margin:0 auto; background-color:#eee; text-align:center; color:red; } p{ width:75px; height:30px; margin:0 auto; } </style></head><body><p>验证码：</p><div id="login" onclick="show()"><a href="#"></a></div><script type="text/javascript"> function codes(n){ var a="azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789"; var b=""; for (var i = 0;i<n;i++){ var index=Math.floor(Math.random()*62); b+=a.charAt(index); } return b; }; function show(){ document.getElementById("login").innerHTML=codes(4); } window.onload=show;</script></body></html>

另一个js验证码的部分代码：

var code ; //在全局定义验证码 //产生验证码 function createCode(){ code = ""; var codeLength = 4;//验证码的长度 var checkCode = document.getElementById("code"); var random = new Array(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');//随机数 for(var i = 0; i < codeLength; i++) {//循环操作 var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） code += random[index];//根据索引取得随机数加到code上 } checkCode.value = code;//把code值赋给验证码 } //校验验证码 document.getElementById("Yzm").addEventListener("change",validate); function validate(){ var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写 if(inputCode.length <= 0) { //若输入的验证码长度为0 alert("请输入验证码！"); //则弹出请输入验证码 $("#Yzm").focus(); YZM = false; } else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 alert("验证码输入错误！@_@"); //则弹出验证码输入错误 createCode();//刷新验证码 $("#Yzm").val("");<span style="font-family: Arial, Helvetica, sans-serif;">//清空文本框</span> $("#Yzm").focus();//重新聚焦验证码框 YZM = false; } else { //输入正确时 $("#Yzm").blur();//绑定验证码输入正确时要做的事 YZM = true; } };

附效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章