js+html制作简单验证码
本文实例为大家分享了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;
}
};
附效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍asp.net验证码的简单制作，包括了asp.net验证码的简单制作的使用技巧和注意事项，需要的朋友参考一下 实际上关于asp.net验证码制作的文章已经很多很多了，但是今天还是要和大家继续分享，亲，可以综合几篇实例，编写出适用于自己网站的ASP.NET验证码，大概也就两大部分： 先建立一个asp.net窗体ValidateCode.aspx；不写任何东西。直接在后台Validate
-
本文向大家介绍如何使用ASP.NET制作简单的验证码，包括了如何使用ASP.NET制作简单的验证码的使用技巧和注意事项，需要的朋友参考一下 大家都知道验证码是以图片形式展示的，而且是动态生成的，这样就需要我们去画出它，那不得不提到是GDI+绘图了 科普一下，什么是GDI+？ GDI+是图形设备接口（GDI）的高级版本， 提供了各种丰富的图形图像处理功能。GDI+主要由二维矢量图形、图像处理和版式3
-
本文向大家介绍php制作的简单验证码识别代码，包括了php制作的简单验证码识别代码的使用技巧和注意事项，需要的朋友参考一下 一直想写这个，过了很久今天兴趣来了索性记录下。 验证码 全自动区分计算机和人类的公开图灵测试（英语：Completely Automated Public Turing test to tell Computers and Humans Apart，简称CAPTCHA），俗称
-
本文向大家介绍JS实现简单短信验证码界面，包括了JS实现简单短信验证码界面的使用技巧和注意事项，需要的朋友参考一下 1.要实现短信验证码界面，首先要有一个文本框，旁边是按钮，点击时开始倒计时。 2.先创建文本框和按钮，按钮设置对应的id，然后在js中通过id获取按钮这个元素，对其执行操作。同时应设置倒计时时间以及计时器变量，并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送。 3.倒计时结束后
-
本文向大家介绍JS实现的简单表单验证功能示例，包括了JS实现的简单表单验证功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考，具体如下： 源代码： myjs1.js文件代码: 注意：在js中声明变量用var，定义函数用function, 这个例子可以实现 爱好的验证(不能为空) ，密码是否一致，而且密码的长度要大于8，备注是否为空! 另
-
本文向大家介绍JS制作简单的三级联动，包括了JS制作简单的三级联动的使用技巧和注意事项，需要的朋友参考一下 用javascript制作的一个简单三级联动，非常简单实用 以上所述就是本文的全部内容了，希望大家能够喜欢。