实例——模拟验证码

最新推荐文章于 2023-06-16 22:47:00 发布

weixin_34204057

最新推荐文章于 2023-06-16 22:47:00 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/hzhjxx/p/9724113.html

版权

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证码</title>
<script src="js/code.js"></script>
<style>
	.code{border: 1px solid #ccc;padding: 10px;cursor: pointer;}
</style>
</head>
<body>
<br>	
请输入：
<input type="text" id="user_text" /> <span class="code" id="code"></span>
<br>
<button id="btn">提交</button>
</body>
</html>

js代码：

var code=null, //显示验证码
	btn=null, //提交按钮
	texts=null, //文本框
	code_list='123456789abcdefg', //验证码的取值
	num=4; //验证码的位数

window.οnlοad=function(){
	init(); //初始化变量
	change_code(); //验证码的内容
	code.οnclick=change_code; //点击改变验证码的内容
	btn.οnclick=test_code; //点击验证	
}

//初始化变量
function init(){
	code=document.getElementById('code');
	btn=document.getElementById('btn');	
	texts=document.getElementById('user_text');
}

//改变验证码的内容
function change_code(){
	var arr=code_list.split(''); //字符串转成数组
	var str='';	
	for(var i=0; i<num; i++){
		var j=parseInt(Math.random()*arr.length); //随机数作为数组的下标
		str+=arr[j];
	}
	code.innerHTML=str;		
}

//验证
function test_code(){
	var val=texts.value; //获取文本框的值
	var code_val=code.innerHTML; //获取验证码的值
	if(val==code_val){
		alert('提交成功！');
	} else{
		alert('验证码输入错误！');
	}
}

转载于:https://www.cnblogs.com/hzhjxx/p/9724113.html

weixin_34204057

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实例——模拟验证码

html代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>验证码</title><script src="js/code.js"></script><style> .code{border...
复制链接

扫一扫