Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 结合 html 制作简单验证码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
- <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;
- }
- };
附效果图:
来源: http://www.phperz.com/article/17/0702/327599.html