原生射流研究…实现验证码功能

效果图：

代码如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 ' title js验证码/title style type=' text/CSS ' # code { width :80 px；高度：30 pxfont-size :20 pxfont-family : arial字体样式：斜体；字体粗细：加粗；border:0字母间距：2 px颜色：蓝色；} /style /head bodydiv输入类型=' text ' id=' input '/input type=' button ' id=' code '/input type=' button ' value='验证id=' check '/div脚本类型=' text/JavaScript '窗口。onload=function(){ var code=document。getelementbyid(' code ')；功能更改(){ //验证码组成库定义变量数组=新数组(“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“0”、“A”、“B”、“C”、“D”、“E”、“F”、“G”、“H”、“I”、“J”、“K”、“L”、“M”、“O”、“Q”、“R”、“S”、“T”、“U”、“V”、“W”、“X”//重新初始化验证码代码=' ';//随机从数组中获取四个元素组成验证码for(var I=0；i4；i ){ //随机获取一个数组的下标var r=ParSeint(数学。random()*数组。长度)；代码=数组[r]；} //验证码添加到投入里code . value=codes } change()；//加载显示在页面上code.onclick=change//单击更换验证码//单击验证var check=文档。getelementbyid(' check ')；var输入=文档。getelementbyid(' input ')；检查一下。onclick=function(){ var输入代码=input。价值。touppercase()；//取得输入的验证码并转化为大写if(inputCode.length==0) { //若输入的验证码长度为0警报('请输入验证码！');//则弹出请输入验证码} else if(inputCode！=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时警报('验证码输入错误！请重新输入');//则弹出验证码输入错误change()；//刷新验证码input.value=/清空文本框} else{ //输入正确时警报('输入正确');//弹出输入正确} } }/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！