转行前端：生成一个四位随机验证码

生成一个四位随机验证码

1、数字+字母（简单）

2、找图片

3、滑动拼图

4、问答类

5、点击汉字拼成语

6、把倒着的文字或者图片正过来

当然了，这个验证校验一般是后端来做的😊

1. 页面刚进来，生成4个验证码
2. 点击看不清，重新生成4个验证码

HTML&CSS代码

       #codebox{            display:inline-block;            width:80px;            height:35px;            line-height:35px;            border:1px solid #AAAAAA;            text-align:center;            font-size:18px;            letter-spacing: 5px;        }        #link{            display:inline-block;        }
<div id="codebox">hj65</div>
<a href="javascript:;" id="link">看不清换一张</a> 

JS代码

var codebox=document.getElementById('codebox'),link=document.getElementById('link');// 编写一个获取四位随机验证码的方法function getcode(){//准备验证码获取的范围（索引0-61）var codearea='0987654321'+'qwertyuiopasdfghjklzxcvbnm'+'QWERTYUIOPASDFGHJKLZXCVBNM';//我们只需要准备四个索引，即可在codearea中通过charAt方法获取到四个字符，把四个字符串拼接在一起就是我们要的var result=''for(i=0;i<4;i++){var n=Math.round(Math.random()*61),char = codearea.charAt(n);result +=char;}return result}//开始加载页面(和点击link)需要生成一个验证码codebox.innerHTML=getcode();//=>执行方法，把return返回的四位验证码存到codebox里link.onclick=function(){codebox.innerHTML=getcode();}