<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
// 验证码——随机
// 1、随机生成一个六位数的验证码（0-9，a-f）
// 2、点击按钮切换验证码
// 3、点击提交时，input的value值与验证码比较
// 首先可以确定的是随机生成的验证码是要封装的函数
window.onload = function() {
var res = getCode();
// 封装随机验证码函数
function getCode() {
// 定义一个数组来拼接
var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','f',]
// 定义一个空字符串来进行拼接
var str = '';
for(var i = 0; i < 6; i++) {
var num = Math.round(Math.random()*(15-0)+0);
// console.log(num);
str += arr[num];
}
return str;
// console.log(str)
}
// 获取文本位置，把得到的验证码赋值给文本
document.getElementById('text').innerText = res;
// 点击按钮进行验证码的切换
document.getElementsByTagName('a')[0].onclick = function() {
document.getElementById('text').innerText = getCode();
}
// 进行对比
document.getElementById('btn').onclick = function() {
var code = document.getElementById('text').innerText;
var inputCode = document.getElementById('inputTxt').value;
if(code != inputCode) {
alert('验证码错误');
document.getElementById('inputTxt').value = ''; // 验证码错误清空input
document.getElementById('text').innerText = getCode(); // 验证码错误，再次刷新验证码
return false;
}else {
alert('验证码正确');
}
}
}
</script>
</head>
<body>
<div class="one">
验证码：
<span id="text">111111</span>
<a href="">看不清 换一张</a>
</div>
<div class="ipt">
<input type="text" id="inputTxt" />
</div>
<button type="button" id="btn">提交</button>
</body>
</html>
js生成随机验证码
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 一、环境配置 1.Python3的环境安装 2.pycharm的安装 二、直接上代码 #coding:utf-8i...
- 环境：Windows 10 64-bit, python == 3.6.4 , PyCharm CE == 201...
