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

转自：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("验证通过");

}

转载于:https://www.cnblogs.com/sharpest/p/10143899.html

如何用JavaScript实现获取验证码的效果相关推荐

js获取验证码倒计时效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
如何用javascript获取文本框，下拉框，单选框的对应值或者将值赋给它们？雪原虎发布于：2007-10-22 00:32
如何用javascript获取文本框,下拉框,单选框的对应值或者将值赋给它们? 雪原虎发布于:2007-10-22 00:32 1.文本框 1.1 <input type="text ...
简单实现获取短信验证码倒计时效果
我急切地盼望着可以经历一场放纵的快乐,纵使巨大的悲哀将接踵而至,我也在所不惜.--太宰治<人间失格> 一:HTML结构: <div class="input-box1&qu ...
Javascript 获取验证码60秒倒计
<button id="time">获取验证码</button>var countdown = 60; var but = document.getElem ...
JavaScript获取验证码，60秒倒计时方法
html <div class="item-input code-box"><input type="text" class="us ...
8.腾讯微博Android客户端开发——自动获取验证码（2）
上一节给大家讲解通过调用android系统自带的浏览器进行授权认证的,使用该种方式能很容易的完成认证,但是该种方式有个弊端,也就是如果使用第三方的浏览器如UC.天天等,输入完QQ账号信息点击" ...
腾讯微博Android客户端开发——自动获取验证码
上一节给大家讲解通过调用android系统自带的浏览器进行授权认证的,使用该种方式能很容易的完成认证,但是该种方式有个弊端,也就是如果使用第三方的浏览器如UC.天天等,输入完QQ账号信息点击" ...
如何用JavaScript的回调函数做出承诺
by Adham El Banhawy 由Adham El Banhawy 如何用JavaScript的回调函数做出承诺 (How to make a Promise out of a Callbac ...
免费获取验证码60秒倒计时
免费获取验证码60秒倒计时 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu ...

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

如何用JavaScript实现获取验证码的效果相关推荐

最新文章

热门文章