暑假实习第一次接触JS是登录注册的正则表达式,一脸懵逼,基础都没有啥都不会,当时没带自己的电脑,没有保存实习写的代码,后来公司解散了,网站链接也失效了。登陆注册还有一个原生JS验证码,当时是在网上找的,也没有保存。后来自己找了一个简单的原生验证码。
效果截图:
HTML代码:
<div class="container">
<input id="text_code" type="text" placeholder="验证码" />
<input id="btn_code" type="button" value=""></input>
<input id="btn_change" type="button" value="验证" />
</div>
JS代码:
//创建变量
var code;
var textCode = document.getElementById('text_code');
var btnCode = document.getElementById('btn_code');
var btnChange = document.getElementById('btn_change');
//在全局 定义验证码
function createCode(){
//创建验证码函数
code = "";
var codeLength = 4;//验证码的长度
var selectChar = 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 charIndex = Math.floor(Math.random()*36);
code += selectChar[charIndex];
}
//显示验证码
btnCode.value = code;
}
window.onload = createCode();
btnCode.addEventListener('click', createCode, false);
//验证验证码输入是否正确
function btnCheck(){
if(textCode.value <= 0){
alert('请输入验证码!');
}else if(textCode.value != code){
alert('验证码输入错误!');
createCode();
textCode.value = '';
}else{
alert('验证码正确~跳转百度');
window.open('http://www.baidu.com');
}
}
btnChange.addEventListener('click', btnCheck, false);