如何用JavaScript实现获取验证码的效果-白红宇

如何用JavaScript实现获取验证码的效果

阅读量：6852 次

发布时间：2019-06-26

本文共 1413 字，大约阅读时间需要 4 分钟。

转自：http://www.php.cn/js-tutorial-411734.html

HTML部分：

<body onload='createCode()'>

<div>验证码：

<input type = "text" id = "input"/>

<input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /></br>

<input type = "button" value = "验证" onclick = "validate()"/>

</div>

</body>

CSS部分：

#code{

font-family:Arial,宋体;

font-style:italic;

color:green;

border:0;

padding:5px 10px;

letter-spacing:3px;

font-weight:bolder;

}

JavaScript部分：

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值赋给验证码

}

//校验验证码

function validate(){

var inputCode = document.getElementById("input").value.toUpperCase();

//取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

alert("请输入验证码！"); //则弹出请输入验证码

}else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

alert("验证码输入错误!"); //则弹出验证码输入错误

createCode();//刷新验证码

document.getElementById("input").value = "";//清空文本框

}else { //输入正确时

alert("验证通过");

}

转载地址：http://wjyyl.baihongyu.com/

你可能感兴趣的文章

JavaWeb综合案例-键盘模拟

查看>>

Android Day03-SQLite数据库操作及ListView详解

查看>>

Looking for APAC Operations IT XML Database Developer in Shenzhen and Hongkong

炉石传说 C# 开发笔记（源代码整理公开）

zoj 1659 Mobile Phone Coverage(矩形面积并)

查看>>

python学习 day3

查看>>

Centos 6.4下用Squid配置反向代理多个内网WEB服务器

SVN使用svn+ssh协议连接服务器时重复提示输入密码解决办法

查看>>

微信公众平台开发(107) 分享到朋友圈和发送给好友

查看>>

GeoTiff如何存储颜色表的研究

查看>>